Question

我有这样的模态设置

<body>
<div class="modal fade" id="pageopen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    x
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    This Modal title
                </h4>
            </div>
            <div class="modal-body">
                Add some text here
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary"> Submit changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<button onclick="showModal('http://www.google.co.id/')">Show Modal</button>

</body>

我只为modal插件添加了最新的jquery，bootstrap js和css。
我遇到的问题是模态背景显示，但是模态标题主体等没有出现。

My Code

请提供解决方案，谢谢

Answer 1

您的Javascript代码错误，要打开您应该使用的Bootstrap 3模式：

$('#pageopen').modal({
        show: true
});

如果您要加载外部网页，可以在此处设置网址：

$('#pageopen').modal({
    show: true,
    remote: 'http://www.example.com'
});

最好使用jQuery click Function而不是＆＃34; onClick＆＃34;。

Answer 2

您的问题是showModal找不到onclick功能，请停止在您的html中永久使用onclick。这从来都不是一个好习惯。而不是设置按钮的ID并使用JQuery中的.click函数：

<button id="showModal">Show Modal</button>

$("#showModal").click(function(){
    $('#pageopen').modal();
});

<强> Check JSFiddle Demo

Answer 3

哈哈，别介意。我为相同的bootstrap组件分别使用了js和css，因此它们相互重叠。

引导提示：
始终只加载一个js文件和一个用于bootstrap的css文件如果你像我一样只想要引导程序的一部分而不是所有的程序包（例如：模态，转换和轮播），那么将它作为一个来自getbootstrap的js和css

Bootstrap - Modal不起作用

3 个答案: