Question

我对我的脚本的意图是modal对话框应该只在您点击链接后显示。不幸的是，它会在页面加载后立即弹出。我已经包含了一个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，它应该可以正常工作。

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

您的代码可以使用数据属性，但更改模态的关闭按钮以使用它：

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

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

对于其他用户，

通过Javascript：

更改您的代码添加以下选项以从头开始隐藏它：

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

然后要显示它，请使用此javascript：

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

要隐藏使用它：

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

模态出现在载荷上

1 个答案:

通过Javascript：