页面加载时打开灯箱
我正在使用这个插件在网站上显示灯箱 http://www.zurb.com/playground/reveal-modal-plugin
我想在页面加载时自动加载一些模式。 我尝试使用这个，但没有用：
在头上
<!-- 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 -->
在身体上
<div id="flyer" class="reveal-modal large">
<h1>Ahora tenemos flyer y todo</h1>
<div id="flyer-img"></div>
<a class="close-reveal-modal">×</a>
</div>
我做错了什么？ 这是我正在工作的页面 www.cosaslindas.com/beta
非常感谢。
I'm using this plugin to show lightbox on a website
http://www.zurb.com/playground/reveal-modal-plugin
I want to load some modal automatically when the page load.
I try using this but didn't work:
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">×</a>
</div>
What I'm doing wrong?
This is the page that I'm working
www.cosaslindas.com/beta
Many thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
尝试在
$('#flier').reveal();之后添加此内容Try adding this after the
$('#flier').reveal();Github 上的此问题解释了如何执行此操作。 这不是 Reveal 的功能，但它看起来可以用来工作。您需要有一个元素（在您的情况下，
#flyer具有属性“data-reveal-onready”）。This issue on Github explains how to do it. It's not a feature of Reveal, but it looks like it can be used to work. You need to have an element (in your case,
#flyerhave the attribute "data-reveal-onready").我一直在寻找模态插件，我认为 Reveal 函数只会绑定到具有 data-reveal-id 属性的标签。
不确定这是否有效，但我想说尝试一下！
添加到您的 html:
并将调用更改为：
Ive been looking to the modal plugin and i think the reveal function will only bind to a tags with the data-reveal-id attribute.
Not sure if this will work but i'd say give it a try!
add to you html:
And change the call to this:
编辑：
您加载 jQuery 库两次！
并
尝试删除最后一个。
编辑2：
我刚刚在 jsfiddle 中测试了这一点。如果您从标头中删除第二个 jquery 库，您的脚本应该可以正常运行！
EDIT:
Your loading jQuery library twice!
And
Trying removing the last one.
Edit2:
I just tested this in jsfiddle. If you remove the 2nd jquery library from your header your script should run fine!