关于bootstrap的modal

代码：

<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">&times;</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关闭。

&times;是html转义字符 ，参考http://tool.oschina.net/commons?type=2