厚盒内联问题

发布于 2024-10-01 02:37:43 字数 926 浏览 6 评论 0原文

我正在尝试使用 Thickbox 创建一个带有隐藏内容的模态窗口它打开窗口很好，不知道为什么它不显示 id="hiddencontent" 内的内容。

我按照内联示例中的建议进行操作 http://jquery.com/demo/thickbox/# -谢谢

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>

<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
</head>

<body>
<a href="#TB_inline?height=155&width=300&inlineId=hiddenContent" class="thickbox">Show Content</a> 

<div id="hiddenContent" style="display: none">inline content comes here</div> 
</body>
</html>

原文

I am trying to create a modal window with hidden content using thickbox
It opens the window fine , not sure whys its not showing the content inside the id="hiddencontent".

i am following as suggested in the examples for inline http://jquery.com/demo/thickbox/#
-thanks

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>

<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
</head>

<body>
<a href="#TB_inline?height=155&width=300&inlineId=hiddenContent" class="thickbox">Show Content</a> 

<div id="hiddenContent" style="display: none">inline content comes here</div> 
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

喜爱皱眉﹌ 2024-10-08 02:37:43

看来您没有 css 文件，您可以在 http://jquery. com/demo/thickbox/#sectiona-3 到您的页面（或另存为 style.css 文件）。

- 编辑 -
是的，抱歉，没有注意到 css 已经加载了:(

顺便说一下，刚刚找到了解决方案，尝试在您的hiddenContent div 中添加 p 标签：

<div id="hiddenContent" style="display: none"><p>inline content comes here</p></div>

希望有帮助；)

It seems you don't have css file, you can copy thickbox css on http://jquery.com/demo/thickbox/#sectiona-3 to your page (or save as style.css file).

-- edit --
Yeh, sorry, didn't notice that css is already loaded :(

By the way, just found the solution, try to add p tag inside your hiddenContent div:

<div id="hiddenContent" style="display: none"><p>inline content comes here</p></div>

Hope helps ;)

回复收藏 0 原文

长伴 2024-10-08 02:37:43

这是厚盒中的一个错误。以下是修复它的方法：

在第 221

行或第 221 行附近，您应该看到这行代码：

$("#TB_ajaxContent").append($('#'+params['inlineId']).children());

将其更改为：

$("#TB_ajaxContent").html($('#'+params['inlineId']).html())

然后，在第 223 行或第 223 行附近，您将看到此行：

$('#'+params['inlineId']).append($("#TB_ajaxContent").children());

通过添加两个来禁用该行前面有斜杠，如下所示：

//$('#'+params['inlineId']).append($("#TB_ajaxContent").children());

说明：

当 Thickbox 将内容从隐藏的 div 复制到 Thickbox 容器中时，它是通过复制所有 .children() 元素来实现的。如果隐藏的 div 中只有文本，则没有子元素，因为文本本身不是子元素。这就是为什么将内容包装在

标记中会起作用，因为现在有一个子标记（

标记）。

因此，如果您只想在隐藏的 div 中包含文本，则使用 .html() 将抓取隐藏的 div 中的所有内容。禁用的第二行可防止在thickbox关闭时thickbox尝试将内容复制回隐藏的div，这将导致子标签内的任何内容在隐藏的div中重复。

This is a bug in thickbox. Here is how you can fix it:

Inside thickbox.js

on or about line 221 you should see this line of code:

$("#TB_ajaxContent").append($('#'+params['inlineId']).children());

change it to this:

$("#TB_ajaxContent").html($('#'+params['inlineId']).html())

and then, on or about line 223 you will see this line:

$('#'+params['inlineId']).append($("#TB_ajaxContent").children());

disable the line by adding two slashes before it like this:

//$('#'+params['inlineId']).append($("#TB_ajaxContent").children());

Explanation:

When thickbox copies the content from the hidden div into the thickbox container, it does so by copying all .children() elements. If you have only text inside your hidden div there ARE NO CHILDREN because text is not itself a child element. This is why wrapping your content in a <p> tag will work because now there is a child (the <p> tag).

So if you want to have text only in your hidden div using .html() instead will grab everything in your hidden div. The second line being disabled prevents thickbox from trying to copy the content back to the hidden div when the thickbox closes, which would cause any content within child tags to be duplicated in the hidden div.

回复收藏 0 原文