引导模式淡入，但容器仍为空答案

【问题标题】：bootstrap modal fades in, but the container remains empty引导模式淡入，但容器仍为空
【发布时间】：2015-03-28 10:19:53
【问题描述】：

我想包含一个简单的引导模式。代码很少，但似乎有问题。

当我单击“启动演示”按钮时，模式淡入，但应该包含“.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>

【问题讨论】：

标签： jquery html twitter-bootstrap modal-dialog

【解决方案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 拥有一个“隐藏”类，单击按钮后未更改
在#example 里面缺少模态对话框和模态内容框
我将 jQuery pull 从 cdn 更改为版本 1.11.2 而不是 1.11.1。

希望这会有所帮助。

【讨论】：