jquery - 尝试将自定义 HTML 添加到灯箱

Question

我正在尝试在我的网站中实现一个灯箱。我按照本教程进行操作，效果很好。但是，我希望灯箱包含 HTML 代码（例如标签）。教程显示的方式强制用户在框中写下你想要的内容

onclick="javascript:lightbox('stuff that's supposed to be in the box')".

我怎样才能让它从另一个文件中读取？或者在框中使用 HTML 的最佳方式是什么？我宁愿不要把所有东西都放在一条线上。

http://jsfiddle.net/ytJaD/

谢谢！

Answer 1

这是lightbox()将 HTML 内容放入框中的函数中的代码：

// insert HTML content
if(insertContent != null){
    $('#lightbox').append(insertContent);
}

您需要做的就是修改或添加到 javascript。

例如，做

onclick="javascript:lightbox('stuff <b>that's</b> supposed <a href="http://my.com">to be</a> in the box')" 

将粗体部分放入其中并添加链接。

如果你有很多文本要输入，你可以这样做：

onclick="javascript:lightbox('stuff <b>that's</b> ' +
'supposed <a href="http://my.com">to be</a> '
'in the box')" 

确保不要丢失空格。

如果您希望显示器显示更多行，请使用以下内容：

onclick="javascript:lightbox('stuff <b>that's</b> supposed<br> <a href="http://my.com">to be</a> <br> in the box')" 

每个<br>都会产生一个新行。

它只是 HTML 格式。

Answer 2

根据我在以下网址阅读的内容，lightbox 似乎不支持开箱即用的功能：http: //lokeshdhakar.com/projects/lightbox2/

但一个很好的选择是 shadowbox.js 在这里找到： http: //www.shadowbox-js.com/

此处的文档：http: //www.shadowbox-js.com/usage.html

正确加载库后的示例链接：

<a href="myHTMLPage.html" rel="shadowbox;width=500;height=500;"></a>

Answer 3

如我所见，您至少有两个选择。首先，您必须创建一个XHR ( XMLHttpRequest ) 对象并从外部文件中读取内容以显示在灯箱中。

在 iframe 或框架中显示内容的第二次机会。因此，灯箱将包含您指定的框架。