modal框
2024-10-20 03:18:33
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 ×
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 ×
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>
最新文章
- Basic linux command
- Xxtea加解密
- IE10以下的IE浏览器在form表单提交、a标签等场景下，接收application/json类型的响应时，会提示是否要下载该json文件
- Spark Streaming之旅
- python环境搭建
- 从模态视图push到另一个视图
- 百度编辑器1.4.3 .net版在vs2008的使用方法
- 系统监控的一些工具w , vmstat
- Java程序猿学习C++之字符串
- Java小例子（学习整理）-----学生管理系统-控制台版
- crtmpserver通常使用基本类演示
- Linux高性能server规划——处理池和线程池
- 【IOS开发】创建XML文件
- Win10+RTX2080深度学习环境搭建：tensorflow、mxnet、pytorch、caffe
- mercury水星路由wifi连接不上的坑
- Mimikatz 法国神器
- 用GDB调试程序（三）
- Java程序员须知的七个日志管理工具
- emlog 百度熊掌号提交插件-基于Emlog6.0.1特别版美化
- leetcode -- Balanced Binary Tree TODO