模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集。

不支持模态框重叠

千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框,需要自己写额外的代码来实现。

模态框的 HTML 代码放置的位置

务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现和/或功能。

对于移动设备的附加说明

Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:

$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})

实例

静态实例

以下模态框包含了模态框的头、体和一组放置于底部的按钮。

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

  1. Bootstrap(v3.2.0)模态框(modal)垂直居中

    Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...

  2. 模态框 modal data-toggle data-target

    模态框 modal data-toggle data-target   1. Data-*属性 模态框(modal) 触发事件(data-toggle) 触发对象data-target(ID 或类) ...

  3. Bootstrap历练实例:模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...

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

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

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

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

  6. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

  7. Bootstrap多层模态框modal嵌套问题

    一.问题 在项目里忽然新加了一个需求,在原本弹出的模态框里,点击模态框里面的按钮再弹出一个模态框,出来另个模态框来展示详细信息.此时就存在两个模态框在这个需求没加之前有一个弹出的模态框也是需要继续点击 ...

  8. Bootstrap-模态框 modal.js

    参考网址:http://v3.bootcss.com/(能抄不写) 1.大模态框 图片效果图: 代码:(button的属性data-target对应的是具体模态框的class) <!-- Lar ...

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

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

随机推荐

  1. 应用安全 - PHP - CMS - DeDeCMS - 漏洞 - 汇总

    SSV-97074 Date 类型 前台任意密码修改 影响范围 前置条件 CVE-2018-20129 Date 类型前台文件上传 影响范围 前置条件(1)前台登录(2)/member/article ...

  2. __getattriute__

    # class Foo: # def __init__(self,x): # self.x = x # def __getattr__(self,item): # print("__geta ...

  3. Oracle Express Edition

    Oracle Express Edition(简洁版/开发版)非注册下载安装及SQL*Plus的简单使用 https://www.cnblogs.com/cjw1115/p/6209439.html ...

  4. 基于硬件的消息队列中间件 Solace 简介之二

    前言...... 前面简单介绍了Solace来自于哪家公司, 主要能做哪些事情. 本篇主要进一步介绍Solace作为消息传递的中间件如何工作的. 传统意义上来讲, 每当我们谈到消息中间件时, 首先想到 ...

  5. kafka调优

    kafka调优:[root@bi-kafka-1 bin]# pwd/data/kafka-9092/bincat kafka-server-start.sh if [ "x$KAFKA_H ...

  6. zk安装管理

    参考: https://www.cnblogs.com/yinzhengjie/p/9209319.html 10.52.110.48 bi-kafka-310.52.48.92 bi-kafka-1 ...

  7. HTML页面左上角图标

    显示网页左上角标志图标 <link rel="shortcut icon"type="image/x-icon"href="images/fav ...

  8. IOS订阅优惠-PHP生成ECDSA算法签名

    <?php use Ramsey\Uuid\Uuid; class ItunesSignatureGenerator { private $appBundleID = 'www.u17.com' ...

  9. MyISAM与InnoDB的索引差异

    数据库的索引分为主键索引(Primary Index)与普通索引(Secondary Index).InnoDB和MyISAM是怎么利用B+树来实现这两类索引的,又有什么差异呢?一.MyISAM的索引 ...

  10. 【Lucene】小谈lucene的BooleanQuery查询对象

    BooleanQuery用于逻辑查询,即所谓的组合查询,具体的逻辑关系如下: 一个具体的使用测试,如下: