代码:
<div class="container">
<h2>标题</h2><div id="example" class="modal fade" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>modal标题</h3>
</div>
<div class="modal-body">
<h4>modal的文本</h4>
<input type="text" />
</div>
<div class="modal-footer">
<a href="#" class="btn btn-success">触发</a>
<a href="#" class="btn" data-dismiss="modal">关闭</a>
</div>
</div>
</div>
</div>
<div data-toggle="modal" href="#example">点我</div>
<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">点我</a></p>
</div>
需要引入jquery.min.js bootstrap.min.js bootstrap.min.css
fade表示modal弹出的时候是渐显的。
modal-dialog modal-content有bootstrap写好的样式,效果美观。
可以使用div 或a标签或button等等各种触发modal ,需要加上data-toggle="modal"。
$(function () { $('#example').modal({
keyboard: true
})});可以加上这段js,意思是键盘上的esc键可以使modal关闭。
×是html转义字符 ,参考http://tool.oschina.net/commons?type=2