启动Thickbox onload 而不是点击答案

【问题标题】：Launch Thickbox onload Instead Of click启动Thickbox onload 而不是点击
【发布时间】：2009-11-26 09:36:38
【问题描述】：

我想启动一个 jquery 厚框 onload 而不是点击。为此，我使用下面的代码。

<script language="javascript">
    tb_show("HAI","#TB_inline?height=240&amp;width=405&amp;inlineId=hiddenModalContent&amp;modal=true",null);
</script>

实际链接是

<a href="#TB_inline?height=240&amp;width=405&amp;inlineId=hiddenModalContent&
amp;modal=true" class="thickbox">Change Name</a>

当我点击上面的链接..粗框出现..

但是在body onload上没有出现厚框..

请帮助解决这个问题..

提前谢谢...

问候日元

【问题讨论】：

标签： jquery thickbox

【解决方案1】：

您的代码应该可以工作。也许尝试把它放在对 jQuery 的 document.ready 的调用中例如

<script language="javascript">
    $(document).ready(function() {
        tb_show("HAI","#TB_inline?height=240&amp;width=405&amp;inlineId=hiddenModalContent&amp;modal=true",null);
    });
</script>

【讨论】：

亲爱的，我正在应用您建议的解决方案，但加载屏幕变暗但不显示页面！
@ShahidGhafoor 请使用窗口而不是文档。我也根据它的工作方式进行了尝试。
请注意，有时您需要使用 $(window).load 才能使其正常工作 - 例如，当尝试在 wp-admin 上打开内联模式时，document.ready 并没有削减它。
如果 $(document) 和 $(window) 都不起作用，我发现有时页面需要一两秒钟才能完全加载，然后再调用厚框，即使告诉 jQuery 等到文档准备好了。奇怪但真实。这是一个示例：$(document).ready(function() { setTimeout(function() {tb_show('HAI', '#TB_inline?height=240&width=405&inlineId=hiddenModalContent&modal=true',null);}, 1000);

【解决方案2】：

咳咳！！！终于整理出来了，我觉得你的 div 内容有点像
<div id="hiddenModalContent" style="display:none">My Content</div>
试试这个，而不是上面的一个
<div id="hiddenModalContent" style="display:none"><div>My Content</div></div>
这应该可以解决问题。请注意，您必须通过 HTMl 元素将内容封装在“hiddenModalContent”中，例如<div>...</div><p>...</p>等

因为在thickbox.js 文件中他们使用了.children() 而不是.html()。这就是我们必须封装内容的原因。

【讨论】：

【解决方案3】：

如果您在页面某处有锚链接，您可以执行以下操作：

<script>
$.ready( function() {
    $("#thickBoxLink").trigger("click");
}
</script>

<html>
<body>
<a href="#TB_inline?height=240&amp;width=405&amp;inlineId=hiddenModalContent&amp;modal=true" id="thickBoxLink" class="thickbox">Change Name</a>
</body>
</html>

这应该模拟点击链接并在页面加载时为您打开厚框。

【讨论】：

【解决方案4】：

这与 Matt Frear 建议的解决方案相同，您可以复制并粘贴以进行测试。我更改了thickbox参数，但您可以随意更改。

<html>
<head>
   <link rel="stylesheet" type="text/css" media="screen" href="http://jquery.com/demo/thickbox/thickbox-code/thickbox.css" />
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://jquery.com/demo/thickbox/thickbox-code/thickbox-compressed.js" type="text/javascript"></script>

<script type='text/javascript'>
$(document).ready(function() {
   tb_show('HAI','http://microsoft.com?KeepThis=true&TB_iframe=true&height=350&width=520');
});
</script>

</body>
</html>

【讨论】：