使用引导程序不会显示模态 [英] Modal doesn't show up using bootstrap
问题描述
每当我按下按钮时，模态将不会显示，我甚至尝试了很多事情，甚至创建了一个custom.js并将此代码放入
Whenever I press the button , the modal just won't show up, I tried so many things even creating a custom.js to put this code in
$('#myModal').modal('show');
但是它根本不起作用，我在哪里做错了?
But it just doesn't work, Where did i do wrong?
这是代码
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<!-- Button -->
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Get Started</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 title</h4>
</div>
<div class="modal-body">
...
</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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
推荐答案
问题是引导3.3.5
原因模态不显示
- 使用默认的引导行为通过按钮进行模态触发，或者
- 使用jQuery
$("#myModal").modal("show")打开模式
- either modal trigger by button using default bootstrap behavior OR
- opening the modal with jQuery
$("#myModal").modal("show")
是因为.modal属性display:none并未更改为display:block
is because .modal property display:none is not changing to display:block
解决方案1
切换回jQuery jQuery 2.x的最后一个稳定版本
Switch back to last stable version of jQuery jQuery 2.x
使用jQuery 3.0.0-alpha1
Solution-2 using jQuery 3.0.0-alpha1
使用引导程序模式事件侦听器，并将.modal属性从display:none更改为diaply:block出现模态时；
Use bootstrap modal event listener and change .modal property from display:none to diaply:block when modal shown.;
如果使用按钮触发模式
$(document).ready(function () {
$("#myModal").on('shown.bs.modal', function () {
$(".modal").css('display', 'block');
})
});
如果使用jQuery打开模式
If using jQuery to open the modal
$(document).ready(function () {
$("#myModal").modal("show").on('shown.bs.modal', function () {
$(".modal").css('display', 'block');
})
});
这篇关于使用引导程序不会显示模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
