我正在尝试用 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">×</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>
最佳答案
发生这种情况是因为您已将说明 的位置固定。
由于您已固定 #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">×</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/