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. MySQL——MySQL初始化配置文件

    初始化配置文件(影响服务器和客户端程序) 1.MySQL初始化配置加载顺序: 命令行 ----> 初始化配置文件 ----> 预编译选项 2.MySQL初始化配置文件加载顺序: (1)/e ...

  2. Django的模板文件的路径设置

    TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [], 'APP_DIRS' ...

  3. 最详尽的 JS 原型与原型链终极详解(1)(2)(3)===转载

    转载===方便以后复习 原文网址:https://www.jianshu.com/p/dee9f8b14771 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为 ...

  4. Python - 面向对象编程 - self 参数

    为什么要讲 self 参数 class PoloBlog: def __init__(self): ... def say(self): ... 在类里面,所有实例方法都需要加 self 参数,且排在 ...

  5. 硕盟SM-T54| TYPE C转HDMI+VGA+USB3.0+PD3.0四合一多功能扩展坞

    硕盟SM-T54是一款 TYPE C转HDMI+VGA+USB3.0+PD3.0四合一多功能扩展坞,支持四口同时使用,您可以将含有USB 3.1协议的电脑主机,通过此产品连接到具有HDMI或VGA的显 ...

  6. Prism+WPF使用DependencyInjection实现AutoMapper的依赖注入功能

    前言 在使用PRISM+WPF开发项目的过程中,需要使用AutoMapper实现对象-对象的映射功能.无奈PRISM没有相关对AutoMapper相关的类库,于是转换一下思想,在nuget 中存在有关 ...

  7. Python小技巧：这17个骚操作你都OK吗？

    导读:Python 是一门非常优美的语言,其简洁易用令人不得不感概人生苦短.本文中带我们回顾了 17 个非常有用的 Python 技巧,例如查找.分割和合并列表等.这 17 个技巧都非常简单,但它们都 ...

  8. HCNP Routing&Switching之IS-IS路由渗透和开销

    前文我们了解了IS-IS邻居建立过程.LSDB同步.拓扑计算和路由的形成:回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15265698.html:今天我们来聊 ...

  9. [Apache Atlas] Atlas 架构设计及源代码简单分析

    Apache Atlas 架构图 Atlas 支持多数据源接入:Hive.HBase.Storm等 Type System Type Atlas 中定义了一些元数据类型 ── AtlasBaseTyp ...

  10. Marvell 88SE9215 AHCI驱动笔记

    禁止转载!禁止转载!禁止转载! 一.Marvell 88SE9215.AHCI与SATA简介 1.Marvell 88SE9215 1)概述 88SE9215是一个四端口,兼容3 Gbps和6 Gbp ...