bootstrap 3中的bootstrap-modal.js被破坏了

时间:2013-10-04 11:02:06

标签: javascript html css twitter-bootstrap bootstrap-modal

在我的代码中,有2个部分(取自示例) - Some Input Some More Input 。我只看到带有禁用滚动条的 Some More Input 以及页面左侧的一些按钮。 (看看here

在你回答之前,我已经在主bootstrap-modal CSS之前应用了补丁,并且包含了bootstrap-modal和modalmanager。我试过把它放在任何地方,但它仍然显示出破碎。

我的代码:

<div id="responsive" class="modal fade" data-width="760" style="display: none;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Responsive</h4>
    </div>
    <div class="modal-body">
        <div class="row">
            <div class="col-md-6">
                <h4>Some Input</h4>
                <p><input class="form-control" type="text"></p>
            </div>
            <div class="col-md-6">
                <h4>Some More Input</h4>
                <p><input class="form-control" type="text"></p>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div>
</div>

2 个答案:

答案 0 :(得分:2)

在不编写JavaScript的情况下激活模态。在控制器元素上设置data-toggle =“modal”,如按钮,以及data-target =“#foo”或href =“#foo”,以定位要切换的特定模式。

所以你应该在下面添加这段代码。

<button type="button" data-toggle="modal" data-target="#responsive">Launch modal</button>

http://getbootstrap.com/javascript/#modals

看看这个疯狂的文件,它解释了如何使用疯狂的方法。

答案 1 :(得分:0)

好吧,我自己解决了这个问题。发现该页面上的示例与Bootstrap 3不兼容,因此我尝试使用Bootstrap文档编写自己的示例。 (我是使用例子的白痴)