使用引导程序不显示模态答案

【问题标题】：Modal doesn't show up using bootstrap使用引导程序不显示模态
【发布时间】：2015-10-14 07:11:25
【问题描述】：

每当我按下按钮时，模态框就不会出现，我尝试了很多方法，甚至创建了一个 custom.js 来将此代码放入

$('#myModal').modal('show');

但它只是不起作用，我哪里做错了？

这是代码

<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">&times;</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>

【问题讨论】：

jsfiddle.net/sandenay/kvq4hwu8
您的bootstrap script 没有结束标签！！你注意到了吗？我的意思是你在</script>之前缺少>
@GuruprasadRao 必须是当我将代码复制粘贴到 stackoverflow 编辑器中时。
所以你还没有收到modal？浏览器中是否有任何控制台错误？
是的，我在浏览器中没有收到任何错误。我现在真的很困惑，会不会是css？

标签： jquery twitter-bootstrap bootstrap-modal

【解决方案1】：

问题是 jQuery 3.0.0-alpha1 版本不完全被 bootstrap 3.3.5 支持

原因模态未显示

使用默认引导行为的按钮触发模式或
使用 jQuery $("#myModal").modal("show") 打开模式

是因为.modal 属性display:none 没有更改为display:block

Fiddle

解决方案 1

切换回上一个稳定版本的 jQuery jQuery 2.x

使用 jQuery 的解决方案 2 3.0.0-alpha1

使用引导模式event 侦听器并将.modal 属性从display:none 更改为diaply:block，当显示模式时。;

如果使用按钮触发模态

$(document).ready(function () {
    $("#myModal").on('shown.bs.modal', function () {
        $(".modal").css('display', 'block');
    })
});

Fiddle

如果使用jQuery打开模态

$(document).ready(function () {
    $("#myModal").modal("show").on('shown.bs.modal', function () {
        $(".modal").css('display', 'block');
    })
});

Fiddle

【讨论】：

仅使用数据属性时会怎样？
data-attributes 是默认的引导模式行为，模式会触发但不会显示，它的 .modal css 属性不会从 display:none 更改为 display:block 所以仅使用 jQuery 3.x解决方法是使用自定义代码更改.modal css 属性以显示模式。
我使用的是 Jquery 1.11.1，现在是 2.x+。你能告诉我如何使用 Jquery 1.11.1 解决同样的问题吗？