模态框

最新推荐文章于 2025-09-13 09:06:35 发布

weixin_33862188

最新推荐文章于 2025-09-13 09:06:35 发布

阅读量46

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/johanxu/p/5516995.html

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

转载于:https://www.cnblogs.com/johanxu/p/5516995.html