1 <head runat="server"> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3 <title></title> 4 <link rel="stylesheet" href="bootstrap-3.3.5/dist/css/bootstrap.min.css" /> 5 <script src="bootstrap-3.3.5/js/tests/vendor/jquery.min.js"></script> 6 <script src="bootstrap-3.3.5/dist/js/bootstrap.min.js"></script> 7 </head> 8 <body> 9 <h2>创建模态框（Modal）</h2> 10 <!-- 按钮触发模态框 --> 11 <button class="btn btn-primary btn-lg" data-toggle="modal" 12 data-target="#myModal"> 13 开始演示模态框 14 </button> 15 <!-- 模态框（Modal） --> 16 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 17 <div class="modal-dialog"> 18 <div class="modal-content"> 19 <div class="modal-header"> 20 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 21 <h4 class="modal-title" id="myModalLabel"> 22 模态框（Modal）标题 23 </h4> 24 </div> 25 <div class="modal-body" runat="server"> 26 27 </div> 28 <div class="modal-footer"> 29 <button type="button" class="btn btn-default" 30 data-dismiss="modal">关闭 31 </button> 32 <button type="button" class="btn btn-primary"> 33 提交更改 34 </button> 35 </div> 36 </div><!-- /.modal-content --> 37 </div><!-- /.modal --> 38 </div> 39 40 </body> 41 </html>
原文：http://www.cnblogs.com/johanxu/p/5516995.html