码迷,mamicode.com
首页 > 其他好文 > 详细

modal框

时间:2018-09-03 02:40:59      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:info   hidden   dia   button   ace   name   src   smis   --   

modal框

创建modal款的基本“框架”:

 1 <body>
 2         <!--1、触发模态框的按钮-->
 3         <button class="btn btn-info" data-toggle="modal" data-target="#myModal">注册</button>
 4         <!--2、定义模态框、平缓出现-->
 5         <div class="modal fade" id="myModal" aria-labelledby="myModalLabel" aria-hedden="ture">
 6             <!--3.定义对话框-->
 7             <div class="modal-dialog">
 8                 <!--4.模态容器-->
 9                 <div class="modal-content">
10                     <!--4.1、容器里的头部分-->
11                     <div class="modal-header">
12                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
13                             &times;
14                         </button>
15                         <h4 class="modal-title" id="myModalLabel">
16                             请填写信息:
17                         </h4>
18                     </div>
19                     <!--4.2、容器里的中间部分-->
20                     <div class="modal-body">
21                         
22                     </div>
23                     <!--4.3、容器里的脚底部分-->
24                     <div class="modal-footer">
25                         
26                     </div>
27                 </div>
28             </div>
29         </div>
30 </body>

 

技术分享图片

分别向header、body、footer添加了信息:

 1 <body>
 2         <!--1、触发模态框的按钮-->
 3         <button class="btn btn-info" data-toggle="modal" data-target="#myModal">注册</button>
 4         <!--2、定义模态框、平缓出现-->
 5         <div class="modal fade" id="myModal" aria-labelledby="myModalLabel" aria-hedden="ture">
 6             <!--3.定义对话框-->
 7             <div class="modal-dialog">
 8                 <!--4.模态容器-->
 9                 <div class="modal-content">
10                     <!--4.1、容器里的头部分-->
11                     <div class="modal-header">
12                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
13                             &times;
14                         </button>
15                         <h4 class="modal-title" id="myModalLabel">
16                             请填写信息:
17                         </h4>
18                     </div>
19                     <!--4.2、容器里的中间部分-->
20                     <div class="modal-body">
21                         <form action="" method="post">
22                             <!--4.2.1输入组2-->
23                             <div class="input-group">
24                                 <span class="input-group-addon">
25                                     <span class="glyphicon glyphicon-user"></span>
26                                 </span>
27                                 <input name="youName" class="form-control" placeholder="用户名/账号"/>
28                             </div>
29                             <br />
30                             <!--4.2.1输入组2-->
31                             <div class="input-group">
32                                 <span class="input-group-addon">
33                                     <span class="glyphicon glyphicon-eye-close"></span>
34                                 </span>
35                                 <input name="youPsw" class="form-control" placeholder="密码"/>
36                             </div>
37                         </form>
38                     </div>
39                     <!--4.3、容器里的脚底部分-->
40                     <div class="modal-footer">
41                         <button class="btn btn-success">登录</button>
42                         <button class="btn btn-danger">取消</button>
43                     </div>
44                 </div>
45             </div>
46         </div>
47     </body>

 

 技术分享图片

 

modal框

标签:info   hidden   dia   button   ace   name   src   smis   --   

原文地址:https://www.cnblogs.com/ynhwl/p/9575694.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!