Question

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

问题似乎是单击按钮会显示模式，但如果您点击＆＃34;关闭＆＃34;它就不会消失。按钮甚至是＆＃34;交叉＆＃34;莫代尔上的图标。看起来模式在打开时被禁用，让一切恢复正常的唯一方法是刷新codepen链接。

由于我正在使用此计算器进行在线教程练习，我只需通过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。有趣的是，我制作了另一支笔here，我只测试了模态位，它在这里工作得很好。

Answer 1

这是因为您确定了说明的位置。

由于 #instructions 已修复，这是模态的父级，因此模式相对高于其父级（ #instructions ），但是父（ #insctions ）本身低于背景（<div class="modal-backdrop fade in"></div>），因为它没有设置（ #instructions ）z-index当你打开一个模态窗口时会创建它。

如果我从div 说明中移除固定的位置，则您的模态可以正常工作。而不是将div固定到底部，您可以直接在按钮上应用CSS。

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

否则您只需将 #instructions 移到背景 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'

这解释了上述问题。

＆＃13;

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

＆＃13;

.parent{
      position: fixed;
    }

＆＃13;

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

＆＃13;

Answer 2

我也有这个问题。问题来自html，由bootstrap js创建：

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

此行在元素结束前直接创建。这导致＆＃34; z-index堆叠元素问题。＆＃34;我相信bootstrap .js会错误地创建这个元素。如果你有mvc布局页面，这个脚本会导致同样的问题。 Beter js想法切割得到目标模态id并在此之前将此行注入html ...

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

SO SOLUTION IS修复bootstrap.js - 模态的一部分：

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

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

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

Solution3：
添加到css：

.modal-backdrop{display:none;}

Bootstrap Modal不能完全在CodePen上运行

2 个答案: