Bootstrap 模态框不能完全在 CodePen 上运行

Question

我正在尝试在 JavaScript 中制作一个计算器。我快结束了，所以我通过 Bootstrap 添加了一个模态，其中包含一个指令列表（有点像手册）。虽然模态在我的本地机器上完美运行，但它在 CodePen 中只能运行一半。

问题似乎是单击按钮会弹出模态框，但如果您单击 "Close" 按钮甚至模态框上的 "cross" 图标，它不会消失。看起来模式在打开时被禁用，让一切重新工作的唯一方法是刷新 codepen link.

因为我正在为在线教程练习制作这个计算器，所以我只需要通过 CodePen 提交它。所以我必须完成这项工作。

这是相关的 HTML -

<div id="instructions">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">
      Launch Instructions
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Instructions</h4>
          </div>
          <div class="modal-body">
            <ul class="list-group">
              <li class="list-group-item">Click on the AC button before beginning each new calculation.</li>
              <li class="list-group-item">For square root of a number, first press the number then press the square root button.</li>
              <li class="list-group-item">An operation that results in a number too large to fit on the screen will display zero instead.</li>
              <li class="list-group-item">If a number has too many digits after the decimal point to fit on screen, some of the digits will be truncated.</li>
              <li class="list-group-item">Some operations like divide by zero, and square root of negative integers are not permitted.</li>
            </ul>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

          </div>
        </div>
      </div>
    </div>

  </div>

在 CodePen 中，我通过 CSS quickadd 添加了 BootStrap，对于 JS，我添加了 jQuery 然后 Bootstrap（按顺序），所以我不确定为什么它不起作用。我在我的本地文件中遵循了相同的顺序，模态在其中完美运行-

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<script type="text/javascript" src="4.js"></script>

这里是 CodePen link for my calculator. Interestingly though, I made another Pen here，我在这里测试模态位，它在这里工作得很好。

Answer 1

发生这种情况是因为您已将说明的位置固定。

因为你已经固定了 #instructions，它是 modal 的父级，模态相对高于它的父级（#instructions)，但父项(#instructions)本身位于背景(<div class="modal-backdrop fade in"></div>)下方(#说明) z-index was not set which gets created when you open a modal window.

如果我从 div 说明中删除 position fixed，您的模式就可以正常工作。您可以直接在按钮上应用 CSS，而不是将 div 固定在底部。

#instructions button {
    position: fixed;
    left: 44%;
    bottom: 0;
}

否则你可以将 #instructions 移动到 backdrop div.

上方

#instructions{
  z-index: 1049;/*keeping z-index above 1040*/
  position: fixed;
  left: 44%;
  bottom: 0;
}

同一问题的 小演示 ，其中无法单击 Chrome 模式内的关闭按钮，而按钮在 FF 中是可单击的。这里模态框被放置在另一个位置固定的容器中。

尝试在 FF 和 Chrome 中获取模态父项的 z-index。在这个演示中 $('.parent').css('z-index');

Chrome z-index is set to 0

FF z-index is set to 'auto'

这就解释了上面的问题。

$(function(){
  $('.modal-body > span').html($('.parent').css('z-index'));
});

.parent{
      position: fixed;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="parent">
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>

      <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Modal testing</h4>
            </div>
            <div class="modal-body">
              z-index: <span></span>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Answer 2

我也有这个问题。问题来自 html，由 bootstrap js:

创建

<div class="modal-backdrop fade in"></div>

此行直接在元素结尾之前创建。这导致 "z-index stacked element problem." 我认为 bootstrap .js 创建此元素是错误的。如果你有 mvc 布局页面，这个脚本仍然会导致同样的问题。更好的 js 想法是获取目标模态 ID 并将此行注入 html 之前...

this.$backdrop = $(document.createElement('div'))
    .addClass('modal-backdrop ' + animate)
    .appendTo(this.$body)

SO 解决方案是修复 bootstrap.js - 模态的一部分：

.appendTo(this.$body)  
//REPLACE TO THIS:
 .insertBefore(this.$element)

解决方案 2：将此脚本添加到您的页面：

$('.modal').appendTo("body")

解决方案3：
添加到 css:

.modal-backdrop{display:none;}

Bootstrap 模态框不能完全在 CodePen 上运行

Bootstrap Modal not working completely on CodePen

html

javascript

jquery

twitter-bootstrap

bootstrap-modal