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框的更多相关文章

  1. Bootstrap Modal 框 alert confirm loading

    /** * Created by Administrator on 2016/5/4. */ /** * 模态窗口 */ window.Modal = { tpls:{ alert:'<div ...

  2. 富文本是在modal框中弹出显示的问题

    记录一下,在用tinymce富文本的时候,由于是用在modal 上的,始终无法获取焦点,后来才发现问题出在tinymce在modal前创建了,所以导致这个问题,解决方案就是用 v-if="v ...

  3. tinymce富文本是在modal框中弹出显示的问题

    记录一下,在用tinymce富文本的时候,由于是用在modal 上的,始终无法获取焦点,后来才发现问题出在tinymce在modal前创建了,所以导致这个问题,解决方案就是用 v-if="v ...

  4. Bootstrap里的Modal框

  5. 拥Bootstrap入怀——模态框（modal）篇

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<CSS绘制Android Robot> 作者主页:myvin 博主QQ:851399101(点击QQ和 ...

  6. bootstrap modal模态框的运用

    http://www.ziqiangxuetang.com/bootstrap/bootstrap-modal-plugin.html 方法 下面是一些可与 modal() 一起使用的有用的方法. 方 ...

  7. 【bootstrap】modal模态框的几种打开方法+问题集锦

    第一部分: 关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来 首先呢,得有个Bootstrap的页面,这里就不说了. 其次呢,得有个modal放在页面中,不管你这段代码加在 ...

  8. 在Bootstrap中得模态框（modal）中下拉不能显示得问题

    $.fn.modal.Constructor.prototype.enforceFocus = function () { $("#insertModal").on("s ...

  9. ant-design-vue中实现modal模态框的复用（添加，编辑展示同一个模态框）

    用两个button(添加,编辑)按钮展示同一个模态框,并不是什么大问题,问题在于解决这两个模态框得有自己的确定和取消方法 父页面完全接管子页面(利于子页面复用) 父页面代码: <template ...

随机推荐

  1. ASP截取字符 截取字符之间的字符

    ASP截取字符:MID函数Mid(变量或字串符,开始字节, 结尾字节(可不填)) InStrRev(变量, "字串符")  最后出现位置InStr(变量, "字串符&qu ...

  2. 初步测试VS2017+Win10IoT，基于World Map of Makers

    测试World Map of Makers Demo,创建一个简单的internet连接应用程序来查询web API的状态(目测是一个延时时间),并使用该信息切换LED. 官方仓库的Solution是 ...

  3. Tomcat中的一些问题

    问题: 一闪而过,解决办法: 用记事本打开startup.bat文件,在最下面添加pause 再次运行,发现问题 CATALINA_HOME是TOMCAT安装路径的别名, 计算机>属性>环 ...

  4. 搭建私服仓库：（一）Windows安装Nuxus

    Nexus下载 官网.官网下载.百度云盘 提取码:su33 将nexus下载下来,以2.14.5的windows版本为例子(3.x暂时下载不下来,迅雷会员都不行) 下载后进行解压,得到以下目录: 其中 ...

  5. K8s 系列(四) - 浅谈 Informer

    1. 概述 进入 K8s 的世界,会发现有很多的 Controller,它们都是为了完成某类资源(如 pod 是通过 DeploymentController, ReplicaSetControlle ...

  6. Linux网络编程：原始套接字简介

    Linux网络编程:原始套接字编程 一.原始套接字用途 通常情况下程序员接所接触到的套接字(Socket)为两类: 流式套接字(SOCK_STREAM):一种面向连接的Socket,针对于面向连接的T ...

  7. golang接口类型判断 VS 接口类型查询

    接口类型判断:接口.(类型) 1.类型查询:查询接口数据对应的类型是否是指定的类型 2.类型转化:如果是指定类型,就将数据转化为接口类型查询: 1.reflect.TypeOf(接口) 2.接口.(T ...

  8. 修改statefulset 有些不允许直接修改

    1.比如修改一个storageClassName: hostpath   会报错 意思是除了 'replicas', 'template',  'updateStrategy'   其他部分都是不可以 ...

  9. HDU2063 过山车(二分匹配)

    过山车 HDU - 2063 RPG girls今天和大家一起去游乐场玩,终于可以坐上梦寐以求的过山车了.可是,过山车的每一排只有两个座位,而且还有条不成文的规矩,就是每个女生必须找个个男生做part ...

  10. CodeForce-808C Tea Party(结构体排序贪心)

    Tea Party CodeForces - 808C 现在有 n 个杯子,每个杯子的容量为 a1, a2, ..., an.他现在一共有 w 毫升茶 (w ≤ a1 + a2 + ... + an) ...