javascript - 加载时出现的模态框

Question

我的脚本的目的是只有在单击链接后才显示模式对话框。不幸的是，它在页面加载后立即弹出。我已经包含了 jsFiddle 和相关片段。我做错了什么？

http://jsfiddle.net/rajkumart08/y88WX/25/

jQuery:

$(document).ready(function(){
    $(function() {
        $('#event-modal').modal({
            backdrop: true
        });
    });
});

HTML:

<div id="event-modal" class="modal hide fade">
  <div class="modal-header">
    <a class="close" href="#">x</a>
    <h3>Modal Heading</h3>
  </div>
  <div class="modal-body">
    <p>Some information</p>
  </div>
  <div class="modal-footer">
    <a class="btn primary" href="#">Primary</a>
    <a class="btn secondary" href="#">Secondary</a>
  </div>
</div>
<a href="/events/2-fefewfewfe/rsvps" data-backdrop="true" data-controls-modal="event-modal" data-keyboard="true">click to open model<span class="ico join"></span></a>

Answer 1

首先，$(document).ready(function(){})和$(function(){})是同一件事，所以你只需要一个。

其次，模式窗口的 HTML 使用数据属性，因此您不需要使用 JavaScript 来调用它。 删除 JavaScript，它应该可以正常工作。

如果还是不行我建议你 read over the documentation在 Bootstrap 上。您甚至可以复制并粘贴示例，然后进行自定义以满足您的需求。

您的代码可以使用数据属性，但更改模式的关闭按钮以使用此:

 <a class="close" href="#" onclick="$('#event-modal').modal('hide')">x</a>

我还想建议您下次发布 fiddle 时，请将 javascript、CSS 和 HTML 分成各自的部分。如果您将其分解并仅保留相关内容，您可能会及早发现错误/bug。

<小时/>

对于其他用户，

通过 JavaScript:

更改您的代码，添加以下选项以从一开始就将其隐藏:

$(function(){
    $('#event-modal').modal({
        backdrop: true,
        show: false
    });
});

然后要显示它，请使用以下 javascript:

$('#event-modal').modal('show');

要使其隐藏，请使用以下命令:

$('#event-modal').modal('hide');