Question

我正在使用此插件在网站上显示灯箱 http://www.zurb.com/playground/reveal-modal-plugin

我想在页面加载时自动加载一些模态。我尝试使用它但没有用：

ON HEAD

<!-- REVEAL LIGHTBOX -->
<script type="text/javascript" src="jquery.reveal.js"></script>
<link rel="stylesheet" href="reveal.css">

<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
   $('#flyer').reveal();
});
</script>
<!-- REVEAL LIGHTBOX -->

ON BODY

<div id="flyer" class="reveal-modal large">
  <h1>Ahora tenemos flyer y todo</h1>
  <div id="flyer-img"></div>
  <a class="close-reveal-modal">&#215;</a>
</div>

我做错了什么？这是我正在工作的页面 www.cosaslindas.com/beta

非常感谢。

Answer 1

尝试在$('#flier').reveal();

之后添加此内容

$('#flier').trigger('click');

Answer 2

This issue on Github explains how to do it.这不是Reveal的一个功能，但看起来它可以用来工作。你需要有一个元素（在你的情况下，#flyer具有“data-reveal-onready”属性。）

Answer 3

我一直在寻找模态插件，我认为揭示功能只会绑定到带有data-reveal-id属性的标签。

不确定这是否有效，但我想试一试！

添加到你html：

<a id="triggerflyermodal" href="#" data-reveal-id="flyer" style="display:none">This is hidden</a>

并将调用更改为：

<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
   $('#triggerflyermodal').click();
});
</script>

Answer 4

编辑：

你加载jQuery库两次！

<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>

并且

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

尝试删除最后一个。

EDIT2：我刚刚在jsfiddle测试了这个。如果从头文件中删除第二个jquery库，则脚本运行正常！

页面加载时打开灯箱

4 个答案: