bootstrap 模式淡入，但容器仍然是空的

Question

我想包含一个简单的 bootstrap 模态框。代码很少，但似乎有问题。

当我单击 "Launch demo" 按钮时，模式淡入，但应该包含“.modal-header”、“.modal-body”和“.modal-footer”的容器是空的。

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">     
    </head>
    <body>               
        <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> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>  
    </body>
</html>

Answer 1

您对模态框的标记不正确。基本上改成这样。

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">     
    </head>
    <body>               
        <div class="container">  
            <h2>Example of creating Modals with Twitter Bootstrap</h2>  
            <div id="example" class="modal fade" style="display: none; "> 
     <div class="modal-dialog">
    <div class="modal-content">   
     <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>     
    </div>
            </div>  
            <p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch demo modal</a></p>  
        </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>  
    </body>
</html>

注：

#example hade a class 'hide' 单击按钮后没有改变
在#example 里面缺少模态对话框和模态内容框
我将 jQuery 从 cdn 拉取到版本 1.11.2 而不是 1.11.1。

希望对您有所帮助。

bootstrap 模式淡入，但容器仍然是空的

bootstrap modal fades in, but the container remains empty

html

jquery

modal-dialog

twitter-bootstrap