13

我正在尝试使用 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() 再次运行，而不重新加载页面，则什么也不会发生。如果我重新加载页面，那么模式会重复——第一次调用会显示覆盖，但第二次不会。

我显然遗漏了一些东西——有什么建议吗？谢谢！

4

1 回答 1

20

定义对话框并设置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();
});

（将点击事件分配给 idshow显示覆盖的元素）

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

我不相信您能够在导致您的问题的特定元素上定义多个叠加层。

于 2010-12-31T04:10:24.070 回答