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

标签 javascript jquery html twitter-bootstrap bootstrap-modal

我正在尝试用 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对于我的计算器。不过有趣的是,我又制作了一支钢笔 here我只测试模态位,它在这里工作得很好。

最佳答案

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

正如你所做的 #说明 固定,它是 的父级模态 ,模态相对高于其父级( #instructions ),但父级( #instructions )本身低于背景( <div class="modal-backdrop fade in"></div> ),因为它是( #instructions ) z-index 未设置,当您打开模式窗口时会创建该 z-index。

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

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

否则你可以移动 #说明 高于背景 分区。
#instructions{
  z-index: 1049;/*keeping z-index above 1040*/
  position: fixed;
  left: 44%;
  bottom: 0;
}

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

尝试在 FF 和 Chrome 中获取 modal 父级的 z-index。
在此演示中 $('.parent').css('z-index');Chrome z-index is set to 0FF 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>

关于javascript - Bootstrap Modal 无法在 CodePen 上完全运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34467736/

相关文章:

php - PHP用户已经存在检查

javascript - jQuery未加载到括号中

jquery - x-editable:如何使用字段值更新帖子网址本身?

javascript - 如何根据内容的大小写来应用类(class)

javascript - JS TypeError:无法读取null的属性“样式”-Chrome

javascript - 将JS对象传递到HTML字符串

javascript - 在使用jQuery输入时验证表单输入字段吗?

javascript - 在绝对 div 位置自动扩展 textarea 不能正确收缩

javascript - 使用 jQuery 检查框架是否存在

javascript - 在divs javascript数组上导航按键