Twitter Bootstrap Modal不会出现

时间:2012-07-15 00:20:06

标签: javascript jquery html twitter-bootstrap modal-dialog

我使用twitter bootstrap创建的任何模态都无法显示。我不确定在看到我使用bootstrap提供的代码设置测试模式并且它仍然不起作用时我做错了什么。

这是我的代码(仅限正文): 你需要链接到bootstrap.js,bootstrap-modal.js,jquery.js和bootstrap.css

<body>
    <div class="modal hide" id="myModal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
                &times;
            </button>
            <h3>Modal header</h3>
        </div>
        <div class="modal-body">
            <p>
                Modal body would go here...
            </p>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>
        </div>
    </div>

    <a data-toggle="modal" href="#myModal">Show Modal</a>
</body>

以下是bootstrap模块所需的bootstrap包和jquery的链接: bootstrap package jquery

2 个答案:

答案 0 :(得分:5)

我的问题是我包括了boostrap.js和bootstrap-modal.js。显然,如果你包含bootstrap.js,你也不应该包含bootstrap-modal.js,因为boostrap.js会导入它兼容的所有javascript插件。这样的事情。删除我的boostrap-modal.js脚本链接后,它就可以了。

答案 1 :(得分:4)

你必须致电:

<script>
   $('#myModal').modal('show')
</script>

</body>标记之后。或者,如果您只想在用户点击某些内容时调用它:

$('#button_id').click(function(){
    $('#myModal').modal('show')
});