Question

我很困惑这个问题，我正在弹出Bootstrap模态。这是一个例子：

    <div class="container">  
        <h2>Example of creating Modals with Twitter Bootstrap</h2>  
        <div id="example" class="modal hide fade in" style="display: none; ">  
            <div class="modal-header">  
                <a class="close" data-dismiss="modal">×</a>  
                <h3>This is a Modal Heading</h3>  
            </div>  
            <div class="modal-body">  
                <h4>Text in a modal</h4>  
                <p>You can add some text here.</p>                
            </div>  
            <div class="modal-footer">  
                <a href="#" class="btn btn-success">Call to action</a>  
                <a href="#" class="btn" data-dismiss="modal">Close</a>  
            </div>  
        </div>  
    <p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">
Launch demo modal</a></p>  
    </div>

从中拉出css：

//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css

基本上，当按下按钮时，模态会尝试加载（样式更改为正文会导致它变暗），但包含模态内容的标记永远不会被渲染。

我认为这是一个CSS问题。当你删除css并重新运行时，样式当然会消失，但是点击锚点实际上会导致更改发生。

我必须假设这是我正在做的事情，所以任何人都可以查看jsfiddle示例并让我知道我的错误在哪里？

提前致谢！

Answer 1

不是完整的答案，但在{div id =“example``中添加modal-content可以让模态运行，但不能在正确的图层上运行。

Bootstrap 3改变了他们加载模态的方式：

模态标记发生了重大变化。 .modal-header，.modal-body和.modal-footer部分现在包含在.modal-content和.modal-dialog中，以获得更好的移动样式和行为。

Bootstrap模态为空白，CDN交付的js＆amp; css资源

1 个答案: