<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<a href="页面url" data-toggle="modal" data-target="#myModal">调用模态框</a> 并且把新页面内容加载到
div.modal-content 内并弹出模态框
加载的页面需要按modal-header modal-body modal-footer书写
比如
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h3 class="modal-title" id="myModalLabel">测试</h3>
</div> <div class="modal-body">
<h3>测试</h3>
</div> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="submit" class="btn btn-primary">测试</button>
</div>
data-dismiss="modal" 控件加上该属性点击关闭模态框
下面是显示效果