模态在加载时出现

Modal appearing onLoad

本文关键字：加载 模态      更新时间：2023-09-26

我的脚本的意图是，modal对话框应该只在您单击链接后显示。不幸的是，它总是在页面加载后立即弹出。我已经包含了一个jsFiddle和相关的代码片段。我做错了什么?

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

jQuery

: 

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

: 

<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>

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

第二，模态窗口的HTML使用数据属性，所以你不需要用javascript调用它。

如果它仍然不能工作，我建议你阅读关于Bootstrap的文档。您甚至可以复制和粘贴示例，然后自定义以满足您的需求。

你的代码与数据属性是好的，但改变模式的关闭按钮使用这个:

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

我还想建议，下次你张贴小提琴，请分开的javascript, CSS和HTML到各自的部分。如果您将其分解并只保留相关内容，您可能会在早期发现错误/bug。

对于其他用户，

通过Javascript:

更改代码，添加以下选项以从一开始就隐藏它:

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

然后使用下面的javascript:

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

设置为隐藏:

$('#event-modal').modal('hide');
相关文章：