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

不支持模态框重叠

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

模态框的 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. 【HANA系列】SAP HANA SQL字符串连接操作

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL字符串连 ...

  2. matlab多图排列

    代码如下: clear; img = imread('C:\\Users\\admin\\Desktop\\original_img3\\testimg\\messi.jpg'); subplot(2 ...

  3. shell - python 函数式编程 -- 经典例子 + 让数据自增 + while + > /dev/null 2>&1 & crontab

    1.shell #!/bin/bash anynowtime="date +'%Y-%m-%d %H:%M:%S'" NOW="echo [\`$anynowtime\` ...

  4. java application.properties 密码加密

    main方法 public static void main(String[] args) { BasicTextEncryptor textEncryptor = new BasicTextEncr ...

  5. sqlalchemy一对多的关系

    #encoding: utf-8 from sqlalchemy import create_engine,Column,Integer,String,Float,func,and_,or_,Text ...

  6. Oracle RAC安装文档

    http://www.itpub.net/thread-1895813-2-1.html chkconfig iptables offservice iptables stop 1.修改主机名rac1 ...

  7. assign()-JS

    ------------恢复内容开始------------ 现需要在js中,使用一个新的对象的值覆盖旧有对象,js中有一个方法: Object.assign(target,…sources) 当ta ...

  8. Dango之模版系统

    1.模板渲染 可以传列表,字典,对象等 {{ 变量 }} {% 逻辑 %} -- 标签 urls.py path('login/', views.login), views.py def login( ...

  9. 小白学习django第四站-关联数据库

    使用mysql连接django首先要配置好相关环境 首先在setting.py配置数据库信息(需要现在mysql中创建一个数据库) 在setting.py那个目录的__init__.py文件中写入 之 ...

  10. myBatis+Spring+SpringMVC框架面试题整理

    myBatis+Spring+SpringMVC框架面试题整理(一) 2018年09月06日 13:36:01 新新许愿树 阅读数 14034更多 分类专栏: SSM   版权声明:本文为博主原创文章 ...