我正在使用jQuery工具来构建一个简单的警报机制 – 为了响应一些
Javascript代码,弹出一个包含消息和OK按钮的叠加层,当点击时,覆盖层就会消失.平凡的,或应该是.我一直在
http://flowplayer.org/tools/demos/overlay/trigger.html之后,一直在第一次被调用的东西,但只有那个时候.如果我重复应该暴露叠加层的JS动作,它不会.
我的内容/ DIV：
<div class='modal' id='the_alert'>
<div id='modal_content' class='modal_content'>
<h2>hi there</h2>
this is the body
<p>
<button class='close'>OK</button>
</p>
</div>
<div id='modal_background' class='modal_background'><img src='/images/overlay/f9f9f9-180.png' class='stretch' alt='' /></div>
</div>
和Javascript：
function showOverlayDialog() {
$('#the_alert').overlay({
mask: {color: '#cccccc',loadSpeed: 200,opacity: 0.9},cloSEOnClick: false,load: true
});
}
正如我所说：当第一次调用showOverlayDialog()时,叠加层就像它应该是一样的,当点击“确定”按钮时,它就会消失.但是如果我导致showOverlayDialog()再次运行,而不重新加载页面,则不会发生任何事情.如果我重新加载页面,那么模式将重复 – 第一次调用会打开覆盖图,但第二次调用不启动.
我显然缺少一些东西 – 有什么建议吗？谢谢！
解决方法
定义对话框并将负载设置为false(禁用对话框的自动加载)：
$('#the_alert').overlay({
mask: {
color: '#cccccc',opacity: 0.9
},load: false
});
然后在显示对话框的处理程序中,调用load api method：
$("#show").click(function() {
$("#the_alert").data("overlay").load();
});
(将点击事件分配给ID为show的元素,显示覆盖)
工作示例：http://jsfiddle.net/andrewwhitaker/Vqqe6/
我不相信您可以在特定元素上定义多个叠加层,这会导致您的问题.
