参考网址:http://v3.bootcss.com/(能抄不写)

1、大模态框

图片效果图:

代码:(button的属性data-target对应的是具体模态框的class)

<!-- Large modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">

<div class="modal-dialog modal-lg" role="document">

<div class="modal-content">

...

</div>

</div>

</div>

2、小模态框

图片效果图:

代码:

<!-- Small modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">

<div class="modal-dialog modal-sm" role="document">

<div class="modal-content">

...

</div>

</div>

</div>

3、我们的模态框

图片效果图

代码:

<div class="modal fade" tabindex="-1" role="dialog">

<div class="modal-dialog" role="document">

<div class="modal-content">

<!--头部开始-->

<div class="modal-header">

<!--关闭按钮-->

<button type="button" class="close" data-dismiss="modal" aria-label="Close">

    <span aria-hidden="true">&times;</span>

  </button>

<!--标题-->

<h4 class="modal-title">Modal title</h4>

</div>

<!--头部结束-->

<!--内容开始-->

<div class="modal-body">

<p>One fine body&hellip;</p>

</div>

<!--内容结束-->

<!--底部开始-->

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>

</div>

<!--底部结束-->

</div>

<!-- /.modal-content -->

</div>

<!-- /.modal-dialog -->

</div>

<!-- /.modal -->

4、禁止掉动画:如果你不需要模态框弹出时的动画效果(淡入淡出效果),删掉 .fade 类即可。

5、js手动切换、打开、关闭模态框

$('#myModal').modal('toggle');

$('#myModal').modal('show');

$('#myModal').modal('hide');

6、ps注意:

(1)不支持同时打开多个模态框;

(2)模态框的 HTML 代码放置的位置,也就是说,尽量作为 body 标签的直接子元素。


Bootstrap-模态框 modal.js的更多相关文章

  1. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

  2. Bootstrap模态框(modal)垂直居中

    http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$( ...

  3. 模态框 modal.js

    模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集. 不支持模态框重叠 千万不要在一个模态框上重叠另一个模态框.要想同时支持多个模态框,需要自己写额外的代码来实现. 模态框的 ...

  4. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. 禁用 Bootstrap 模态框(Modal) 点击空白时自动关闭

    在做项目的时候,来了这么一个需求,要求打开模态框后,点击空白的地方不让他自动关闭,只能点击关闭按钮才能关闭. 有了需求,就开始查找资料寻求解决的方法. 我找到的解决方法如下: $('#registCo ...

  6. Bootstrap模态框modal的高度和宽度设置

    (1)高度 将style=“height:900px”放在<div class = "modal-dialog">或者更外层上,整个模态框的高度不会发生变化 如下图所示 ...

  7. bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法

    bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容 ...

  8. Bootstrap模态框(MVC)

    BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...

  9. Bootstrap3模态框Modal垂直居中样式

    1,Bootstrap 模态框插件Bootbox垂直居中样式: <!DOCTYPE html> <html lang="en"> <head> ...

  10. js控制Bootstrap 模态框(Modal)插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

随机推荐

  1. 201707《Ruby元编程》

    元编程不过是编程--经典必读 作用域(绑定) 打破作用域门的方式 对象模型图 七条规则 法术手册 作用域(绑定) 改变作用域的关键字, 分别是module,class和def.我们称为作用域的门(sc ...

  2. pytorch max和clamp

    torch.max() torch.max(a):数组a的最大值 torch.max(a, dim=1):多维数组沿维度1方向上的最大值,若a为二维数组,则为每行的最大值(此时是对每行的每列值比较取最 ...

  3. php截取指定两个字符之间的字符串

    //截取指定两个字符之间的字符串 public function cut($begin,$end,$str){ $b = mb_strpos($str,$begin) + mb_strlen($beg ...

  4. BAT 五路internet负载均衡

    一个网上下载的bat文件 也不记得从那里下载的了 记得似乎需要管理员权限运行 依稀记得测试有效 放在这里做个记录 @echo off echo. echo ╭─────────╮ echo ╭──── ...

  5. python中pandas数据分析基础3(数据索引、数据分组与分组运算、数据离散化、数据合并)

    //2019.07.19/20 python中pandas数据分析基础(数据重塑与轴向转化.数据分组与分组运算.离散化处理.多数据文件合并操作) 3.1 数据重塑与轴向转换1.层次化索引使得一个轴上拥 ...

  6. Day 25:XML解析

    XML解析 xml文件除了给开发者看,更多的情况使用程序读取xml文件的内容.这叫做xml解析 XML解析方式(原理不同) DOM解析 SAX解析 XML解析工具 DOM解析原理: JAXP (ora ...

  7. 每天一点点之 uni-app 框架开发 - 页面滚动到指定位置

    项目需求:在页面中,不管位于何处,点击评论按钮页面滚动到对应到位置 实现思路如下: uni.createSelectorQuery().select(".comment").bou ...

  8. 活动目录对象属性批量修改工具------ADModify

    最近下载了一个可以修改活动目录用户.组.联系人等活动目录对象属性的工具,试用了一下,发现还是蛮好用的,并且还可以修改对象的扩展属性,如:在活动目录中安装了Exchange 2003,Exchange ...

  9. linux下编译bochs-2.6.2

    操作系统: Fedora19 内核: 3.12.9 Linux localhost.localdomain 3.12.9-201.fc19.i686 #1 SMP Wed Jan 29 16:02:1 ...

  10. 记一次docker使用异常

    背景: win10 docker 有几天没有用Oracle数据库,突然发现数据库挂了 docker start oracle 报错 具体错误信息: Error starting userland pr ...