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. 用CUDA写出比Numpy更快的规约求和函数

    技术背景 在前面的几篇博客中我们介绍了在Python中使用Numba来写CUDA程序的一些基本操作和方法,并且展示了GPU加速的实际效果.在可并行化的算法中,比如计算两个矢量的加和,或者是在分子动力学 ...

  2. n个容器取油问题再探

    在 韩信分油问题的拓展分析 里,最后给出了一般性的结论,即: 用 n (n > 1) 个不规则无刻度的容器从一个无穷大的油桶里取油,这些容器容量都为整数升,分别记为 a1, a2, ..., a ...

  3. dotnet OpenXML 读取 PPT 内嵌 ole 格式 Excel 表格的信息

    在 Office 中,可以在 PPT 里面插入表格,插入表格有好多不同的方法,对应 OpenXML 文档存储的更多不同的方式.本文来介绍如何读取 PPT 内嵌 ole 格式的 xls+ 表格的方法 在 ...

  4. Kickstart无人值守原理及简介

    原文转自:https://www.cnblogs.com/itzgr/p/10029461.html作者:木二 目录 一 简介及原理 二 搭建无人值守步骤 三 PXE介绍 四 Kickstart简介 ...

  5. SpringBoot笔记（7）

    一.单元测试 1.JUnit5简介 Spring Boot 2.2.0 版本开始引入 JUnit 5 作为单元测试默认库 作为最新版本的JUnit框架,JUnit5与之前版本的Junit框架有很大的不 ...

  6. kubernetes部署一个应用程序

    文章原文 部署 nginx Deployment 如果你已经完成了Kubernetes的搭建,那我跟我一块来部署第一个应用程序吧.没有完成 Kubernetes 集群搭建的,请参考文档 使用 kube ...

  7. noip模拟33

    \(\color{white}{\mathbb{失足而坠千里,翻覆而没百足,名之以:深渊}}\) 这场考试的时间分配非常不科学 开题试图想 \(t1\) 正解,一个半小时后还是只有暴力,特别惊慌失措 ...

  8. 网络游戏逆向分析-6-使用背包物品call

    网络游戏逆向分析-6-使用背包物品call 首先,大家在处理网络游戏的时候,一定得利用好发包函数,因为他就是整个网络游戏的关键. 处理办法: 这里还是直接给发包打断点来处理. 就像我们之前处理喊话函数 ...

  9. lua中的sleep实现

    这篇文章主要介绍了Lua中实现sleep函数功能的4种方法,本文讲解了在一个死循环中设置一个跳出条件方法.调用系统的sleep函数法.Windows下ping命令法.socket库中select函数法 ...

  10. 如何在线安全清理mysql慢日志

    部门mysql数据库的服务器磁盘空间快满了,查看了下磁盘的慢日志,发现占了50多个g,百度了资料后删除成功,现在和大家分享下我清理的过程,或许有更好的办法. 1.首先连接进入mysql,查看慢日志的状 ...