Question

我想用javascript打开一个bootstrap模态窗口。但是这段代码不起作用：

<a href="" id="openUser">Open Modal JS (failed)</a>

$(function(){
 $( "#openUser" ).click(function() {
   alert( "Handler for .click() called." );
   $('#myModal').modal('show');
 });
})

警告消息框显示，似乎模态确实打开但它立即消失！

如果我用document.ready函数打开模态它就可以了！

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

知道可能出现什么问题吗？我无法使用静态方法打开模型（也可以）

<a role="menuitem" tabindex="-1" href="#" data-toggle="modal" data-target="#myModal" id="whatEver">Open Modal Static Link (works)</a>

因为我必须使用jquery.load将一些外部数据放入具有功能的模式（PHP Script）。或者有没有办法用静态方法执行此操作？

模态：

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

Answer 1

这通常与模态的 z-index 有关，而z-index与其他事物有关...短暂的黑客是将模态内容作为身体元素。

对于需要检查所有页面的长答案，z-index属性取决于定位（必须是相对的，绝对的，固定的）和堆叠上下文。这意味着您需要查看包装模态的所有元素。有关this smashing magazine link的更多信息。

Answer 2

我不知道它是否会解决您的问题但是，您应该只使用这些＆＃39;或者这些＆＃34;引号。这在过去给我带来了一些错误。只有在Javascript中包含HTML代码时才应混合它们。像这样：

var $newdiv1 = $( '<div id="object1"/>' );

祝你好运

Answer 3

我自己解决了这个问题。多么愚蠢的错误！我错过了href标签中的＃：

错误：

<a href="" id="openUser">Open Modal JS (failed)</a>

正确的：

<a href="#" id="openUser">Open Modal JS (work)</a>

Bootstrap Modal不会使用javascript方法打开

3 个答案: