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. eh-admin一套前后端一体的轻量级后台管理系统

    https://gitee.com/DawnYang/eh-admin 主要技术 后端技术:Spring Boot,Apache Shiro,MyBatis-Plus等: 前端技术:Jquery,La ...

  2. 神舟G7-CT7NK 安装tensorflow-gpu

    参考https://www.cnblogs.com/xbit/p/9768238.html 直接安装,运行keras mnist数字识别报错: Could not create cudnn handl ...

  3. MySQL 5.7新特性介绍

    本文是基于MySQL-5.7.7-rc版本,未来可能 还会发生更多变化. 1.即将删除的特性1.1.InnoDB monitoring features,详见:WL#7377(访问地址:http:// ...

  4. 源码解析Spring AOP的加载与生效

    本次博主主要进行Spring AOP这里的解析,因为在工作中使用后,却不知道背后的实现原理并在使用的过程中发现了一些认知缺陷,所以决定写这么一篇文章以供大家参考参考,进入正题. 本次博主使用了@Asp ...

  5. 洛谷P1083 借教室 题解

    题目 [NOIP2012 提高组] 借教室 题解 这道题是几周之前做到的一道题,本来不想讲的,因为这道题也是用到了二分答案的方法,这类题目之前已经发布过两篇题解了.但这道题还运用了差分数组这个思想,所 ...

  6. 前后端数据交互(五)——什么是 axios？

    一.什么是 axios ? axios是基于 Promise 的 ajax 封装库,也是前端目前最流行的 ajax 请求库.简单地说发送 get.post 请求,是一个轻量级的库,使用时可直接引入. ...

  7. Vue项目-初始化之 vue-cli

    1.初始化项目 a.Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-servi ...

  8. vim中字符串的替换

    vi/vim 中可以使用 :s 命令来替换字符串 :s/vivian/sky/ 替换当前行第一个 vivian 为 sky :s/vivian/sky/g 替换当前行所有 vivian 为 sky : ...

  9. PTA 面向对象程序设计 6-1 引用作函数形参交换两个整数

    引用作函数形参交换两个整数 设计一个void类型的函数Swap,该函数有两个引用类型的参数,函数功能为实现两个整数交换的操作. 裁判测试程序样例: #include <iostream> ...

  10. Java从入门到精通（第5版）上半部分

    1.1java简介 先起了oak 橡树 这个名字,因为商标原因改为爪洼岛谐音的Java 一次编写,到处运行 java如何运行 java程序既是编译型又是解释型 Java版本 Java SE 标准版(开 ...