Question

我想要包含一个简单的bootstrap模式。代码很小，但似乎有些不对劲。

当我点击“启动演示”按钮时，模态会淡入，但应该保存“.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一个“隐藏”类，单击按钮
在#example里面缺少模态对话框和模态内容框
我将jQuery pull从cdn更改为版本1.11.2而不是1.11.1。

希望这有帮助。

bootstrap模式淡入，但容器仍为空

1 个答案: