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

不支持模态框重叠

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

模态框的 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. 自然语言处理NLP学习笔记二:NLP实战-开源工具tensorflow与jiagu使用

    前言: NLP工具有人推荐使用spacy,有人推荐使用tensorflow. tensorflow:中文译作:张量(超过3维的叫张量)详细资料参考:http://www.tensorfly.cn/ J ...

  2. python 实现 灰色预测 GM(1,1)模型 灰色系统 预测 灰色预测公式推导

    来源公式推导连接 https://blog.csdn.net/qq_36387683/article/details/88554434 关键词:灰色预测 python 实现 灰色预测 GM(1,1)模 ...

  3. 非常好的一个JS代码(CJL.0.1.js)

    /*! * Cloudgamer JavaScript Library v0.1 * Copyright (c) 2009 cloudgamer * Blog: http://cloudgamer.c ...

  4. 动态赋予java类的属性set与get值

    public class Contact { private String name; private String tel; private attrControl attrC=new attrCo ...

  5. mac环境提示:make sure that /usr/local/bin is in your path

    今天我在Mac环境下安装了Homebrew和node.js后,输入node -v.brew.npm都提示: command not found,然后我查看了下Homebrew的安装日志,发现日志里有个 ...

  6. 第五次java实验报告

    Java实验报告 班级 计科二班 学号 20188437 姓名 何磊 完成时间2019/10/10 评分等级 实验四 类的继承 实验目的 理解抽象类与接口的使用: 了解包的作用,掌握包的设计方法. 实 ...

  7. Entity Framework常用方法及案例

    ⒈Skip(int count) 说明:跳过集合的前n个元素:延迟.即我们跳过给定的数目返回后面的结果集. ⒉Take(int count) 说明:获取集合的前n个元素:延迟.即只返回限定数量的结果集 ...

  8. thinkphp框架部署出现404解决

    1:虚拟机配置文件修改: location / { index index.php index.html; if (!-e $request_filename) { rewrite ^/index.p ...

  9. 多个div排列在同一行而不换行

    有时候,我们可能会产生多个div标签横向排列而不换行的需求,具体有以下几种实现方法: 1. 同级div设置display:inline-block,父级div强制不换行例如: <html> ...

  10. 微信小程序全局属性

    通用全局属性:(前端也有) Infinity 代表正的无穷大的数值. NaN 指示某个值是不是数字值. undefined 指示未定义的值. 通用全局函数:(前端也有) decodeURI() 解码某 ...