厚盒内联问题答案

【问题标题】：Thickbox inline problem厚盒内联问题
【发布时间】：2010-11-05 03:54:50
【问题描述】：

我正在尝试使用厚框创建一个带有隐藏内容的模式窗口它打开窗口很好，不知道为什么它没有显示 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>

【问题讨论】：

标签： thickbox

【解决方案1】：

你好像没有css文件，你可以把http://jquery.com/demo/thickbox/#sectiona-3上的thickbox css复制到你的页面（或者另存为style.css文件）。

-- 编辑-- 是的，对不起，没有注意到css已经加载了:(

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

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

希望有所帮助；）

【讨论】：

我检查了它似乎在那里的 css 文件的路径，不知道为什么它没有在厚框/模态窗口中提取内容。我只是得到一个空的厚箱。
我刚刚发现了一些时髦的东西，如果您在
标签中包含可以使其工作的内容
您是否尝试在您的 div 中添加 p 标签？它在这里工作..我在thickbox示例代码上看到它;）

【解决方案2】：

这是thickbox 中的一个错误。解决方法如下：

thickbox.js 内部

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

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

改成这样：

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

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

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

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

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

解释：

当thickbox 将隐藏的div 中的内容复制到thickbox 容器中时，它通过复制所有.children() 元素来实现。如果您的隐藏 div 中只有文本，则没有孩子，因为文本本身不是子元素。这就是为什么将您的内容包装在 <p> 标记中会起作用的原因，因为现在有一个孩子（<p> 标记）。

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

【讨论】：

【解决方案3】：

.js文件不需要编辑，解决方法很简单。

也许稍后 :) 但我克服了这个问题，只是将#TB_inline? 中的? 字符更改为&

问题出在内部 parseQuery 复选框函数上，该函数解析匹配对，但当查询有双 ? 时，它就会崩溃。

更新：在某些情况下，还需要 <p> 修复 ;)

希望对你有帮助。

【讨论】：

【解决方案4】：

函数 tb_position() 需要更新。

这个条件

if ( !(jQuery.browser.msie && jQuery.browser.version

是错误的原因。

jQuery 不再支持 jQuery.browser。为了在这种情况下检测 IE6，请将上述条件更改为此

if ( !(/\bMSIE 6/.test(navigator.userAgent)))

【讨论】：