1

我对我的脚本的意图是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>
4

1 回答 1

1

首先，$(document).ready(function(){})和$(function(){})都是一样的东西，所以你只需要一个。

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

如果它仍然不起作用，我建议您阅读 Bootstrap 上的文档。您甚至可以复制并粘贴示例，然后根据您的需要进行自定义。

您的代码对数据属性很好，但更改模式的关闭按钮以使用它：

 <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');
于 2013-03-04T17:57:51.173 回答