Question

我想开始说我已经搜索并搜索了我的问题的解决方案 - 在尝试了我读到的所有内容之后 - 没有成功。我只是想在用户点击链接时弹出一个简单的模态（目前尚未准备好）。

---已经尝试过---

确保没有第二个bootstrap javascript文件（特别是在标题中）
尝试了javascript语法的变体
尝试链接html中的变体

当我将链接设为＆＃34;按钮＆＃34;那么模态很好 - 但我不想要一个简单的链接作为按钮。

$("body").on("click","#empty",function(event){
    $("#myModal").modal()
})

<li><a href="#" data-toggle="modal" data-target="#myModal" id="empty">Our Blog</a></li>

我也试过

$(document).ready(function(){
    $("#empty").click(function(){
        $("#myModal").modal();
    });
});

我怀疑html的设置方式有问题（因为模式适用于＆＃34;按钮＆＃34;但不适用于常规链接）

如果您需要更多说明，请与我们联系 - 感谢您的帮助！

Answer 1

当您使用Javascript启动模式时，如果您的链接“还没有准备好”它将无效。假设你的链接是动态创建的，你必须确保一旦它在DOM中，在JS回调中或者你的链接被创建（而不是Document.ready函数）时启动它。

另外值得注意的是，要启动默认触发（使用'data-'属性在html中设置），您只需使用：

$("#myModal").modal();

但是如果你想在onClick函数中手动触发它，你需要添加'show'或'toggle：

$("body").on("click","#empty",function(){
    $('#myModal').modal('toggle');
)};

同样，当链接在DOM中时，这两个代码都需要在document.ready函数或回调中包装。

Answer 2

这是工作模式......对你有帮助......

<script type='text/javascript'>
('#myModal').modal('show');
</script>

<li><a href="#" data-toggle="modal" data-target="#myModal">Click Here</a></li>

<div id="myModal" class="modal fade" role="dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    <p>Some text in the modal.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

否则尝试此代码...

$(document).ready(function(){
$("#empty").click(function(){
    $("#myModal").modal('show');
});
});

模态快速消失+ Bootstrap + Javascript

2 个答案: