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. 笔记:如何使用postgresql做顺序扣减库存

    如何使用postgresql做顺序扣减库存 Ⅰ.废话在前面 首先这篇笔记源自于最近的一次需求,这个临时性需求是根据两份数据(库存数据以及出库数据) 算出实际库存给到业务,至于库存为什么不等于剩余库存, ...

  2. Python3-sqlalchemy-orm 创建多表关联表带外键

    #-*-coding:utf-8-*- #__author__ = "logan.xu" import sqlalchemy from sqlalchemy import crea ...

  3. 从kratos分析BBR限流源码实现

    什么是自适应限流 自适应限流从整体维度对应用入口流量进行控制,结合应用的 Load.CPU 使用率.总体平均 RT.入口 QPS 和并发线程数等几个维度的监控指标,通过自适应的流控策略,让系统的入口流 ...

  4. 20210811 Dove 打扑克,Cicada 与排序,Cicada 拿衣服

    考场 开考感觉 T3 比较可做.T1 看上去不难但毫无思路. 先想了 25min T3,想到一个确定左端点,二分最长的右端点,甚至想到了用猫树维护区间 or and...上厕所回来发现假了,没有单调性 ...

  5. 【曹工杂谈】Maven IOC容器的下半场：Google Guice

    Maven容器的下半场:Guice 前言 在前面的文章里,Maven底层容器Plexus Container的前世今生,一代芳华终落幕,我们提到,在Plexus Container退任后,取而代之的底 ...

  6. Prometheus 2.21.0 新特性

    Prometheus 2.21.0 现在(2020.09.11)已经发布,在上个月的 2.20.0 之后又进行了很多的修复和改进. 这个版本使用了 Go 1.15 进行编译,不赞成在TLS证书验证中使 ...

  7. 第七章：网络优化与正则化(Part2)

    文章相关 1 第七章:网络优化与正则化(Part1) 2 第七章:网络优化与正则化(Part2) 7.3 参数初始化 神经网络的参数学习是一个非凸优化问题．当使用梯度下降法来进行优化网络参数时,参数初 ...

  8. Alex网络结构

    AlexNet网络结构   网络包含8个带权重的层:前5层是卷积层,剩下的3层是全连接层.最后一层全连接层的输出是1000维softmax的输入,softmax会产生1000类标签的分布网络包含8个带 ...

  9. C++ 输入一行未知个数的整数

    C++ 输入一行未知个数的整数 代码: #include<iostream> #include<vector> using namespace std; int main() ...

  10. scrum项目冲刺_day09总结

    摘要:今日完成任务. 1.短信服务完成(由于使用免费的接口,导致部分手机会收到垃圾短信) 2.注册登录完成 3.导航还在进行 总任务: 一.appUI页面(已完成) 二.首页功能: 1.图像识别功能( ...