javascript – Bootstrap Modal无法在CodePen上完全运行

2023年5月16日 127次阅读

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

问题似乎是单击按钮会显示模式,但如果单击“关闭”按钮甚至模式上的“交叉”图标,它就不会消失.看起来模式在打开时被禁用,让一切恢复正常的唯一方法是刷新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.有趣的是,我制作了另一个Pen here,我只测试了模态位,它在这里工作得很好.

最佳答案 它正在发生,因为你已经确定了指令的位置.

正如您已经修复了#instructions,它是模态的父级,模态相对高于其父级(#instructions),但父级(#insctions)本身位于背景之下(< div class =“modal-backdrop fade)在“>< / div>”中,因为它(#insctions)没有设置z-index,当你打开一个模态窗口时会创建它.

如果我从div指令中删除固定的位置,你的模态工作正常.
您可以直接在按钮上应用CSS,而不是将div固定到底部.

#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设置为0

FF z-index设置为’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>
点赞