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,它是 modal 的父级,因此模态相对高于其父级(#instructions) ,但父级(#instructions)本身位于背景(<div class="modal-backdrop fade in"></div>)下方,因为它(#instructions)未设置 z-index,它在您打开时创建模态窗口。

如果我从 div instructions 中删除 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>

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

相关文章:

javascript - 是否可以在 FusionCharts 中使用 JSP 导出(服务器端)javascript 图表?

javascript - AJAX - jQuery - 三重动态下拉菜单

html - 使用具有固定大小边距间距的 flexbox 的网格列

javascript - 将变量传递给后台脚本并在跨选项卡的其他函数中使用它,而不使用存储 api

html - 六边形的响应网格

javascript - Sequelize 同步查找

javascript - 创建隐藏的cmd javascript

javascript - 更改后的 Angular Testing 输入值

javascript - 从另一个 js 源文件调用函数时出现未定义错误

javascript - ajax响应错误(XML解析错误: no element found Location: moz-nullprincipal)