模态框

Posted hamburger

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了模态框相关的知识,希望对你有一定的参考价值。

 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>

 

以上是关于模态框的主要内容,如果未能解决你的问题,请参考以下文章

使用jQuery将多条数据插入模态框的实现代码

简单的bootstrap模态框问题

bootstrap模态窗口怎么设置

使用BootStrap模态框修改表格中某条数据

bootstrap模态框中表单怎么提交表单

模态框的对齐