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. 手写个jsonp

    原生jsonp具体实现 先上代码: //http://www.baidu.com?aa=11&callback=my_jsonp04349289664328899 var jsonp = fu ...

  2. idea无法使用中文输入法输入

    问题--idea无法使用中文输入 原因:idea本身版本过高,所以需要你强制减低它的jdk版本 解决:使用配置idea环境变量解决 ps:目前适用于任何版本的jdk和idea 步骤: 1.新建一个ID ...

  3. Final Cut Pro X 10.4.7 修改长宽比, 截取某一段视频导出

    新建项目时设置过长宽比例,现在要修改 窗口 - 项目属性 - 修改 - 自定义 要注意的是,导出时也要选择一下比例 截取某一段视频导出 将鼠标移到你要截取的片段的开始处,点击快捷键 i(标记-设定范围 ...

  4. RabbitMQ-进阶

    目录 过期时间TTL 设置队列TTL 消息确认机制的配置 死信队列 内存磁盘的监控 RabbitMQ的内存控制 命令的方式 配置文件方式 rabbitmq.conf RabbitMQ的内存换页 Rab ...

  5. Python之psutil-进程管理

    在给PC端应用做自动化测试或者监测应用性能时,不可避免的会与进程管理打交道,python中的psutil模块能够帮助我们处理进程,它主要用于系统监视.分析和限制进程资源以及管理正在运行的进程.一起来了 ...

  6. Apache Hudi内核之文件标记机制深入解析

    1. 摘要 Hudi 支持在写入时自动清理未成功提交的数据.Apache Hudi 在写入时引入标记机制来有效跟踪写入存储的数据文件. 在本博客中,我们将深入探讨现有直接标记文件机制的设计,并解释了其 ...

  7. Throwable中3个异常的方法

  8. leetcode-螺旋矩阵(指针)

    给你一个 m 行 n 列的矩阵 matrix ,请按照 顺时针螺旋顺序 ,返回矩阵中的所有元素. 示例 1: 输入:matrix = [[1,2,3],[4,5,6],[7,8,9]] 输出:[1,2 ...

  9. uni-app仿抖音APP短视频+直播+聊天实例|uniapp全屏滑动小视频+直播

    基于uniapp+uView-ui跨端H5+小程序+APP短视频|直播项目uni-ttLive. uni-ttLive一款全新基于uni-app技术开发的仿制抖音/快手短视频直播项目.支持全屏丝滑般上 ...

  10. final关键字在PHP中的使用

    final关键字的使用非常简单,在PHP中的最主要作用是定义不可重写的方法.什么叫不可重写的方法呢?就是子类继承后也不能重新再定义这个同名的方法. class A { final function t ...