jQuery Tools警报可以运行一次(但只能运行一次)

Question

我正在尝试使用jQuery Tools构建一个简单的警报机制 - 响应一些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(),而不重新加载页面,则没有任何反应.如果我重新加载页面,那么模式会重复 - 第一次调用会显示叠加层,但第二次调用不会.

我显然缺少一些东西 - 有什么建议吗？谢谢!

Answer 1

定义对话框并设置load为false(禁用对话框的自动加载):

$('#the_alert').overlay({
    mask: {
        color: '#cccccc',
        loadSpeed: 200,
        opacity: 0.9
    },
    closeOnClick: false,
    load: false
});

然后在显示对话框的处理程序中,调用load api方法:

$("#show").click(function() {
    $("#the_alert").data("overlay").load();
});

(将click事件分配给id为show显示叠加层的元素)

这里的工作示例:http://jsfiddle.net/andrewwhitaker/Vqqe6/

我不相信你能够在特定元素上定义多个叠加层,这会导致你的问题.