选项

有一些选项可以用来定制模态窗口(Modal Window)的外观和感观,它们是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项:

选项名称 类型/默认值 Data 属性名称 描述
backdrop boolean 或 string 'static'
默认值:true
data-backdrop 指定一个静态的背景,当用户点击模态框外部时不会关闭模态框。
keyboard boolean
默认值:true
data-keyboard 当按下 escape 键时关闭模态框,设置为 false 时则按键无效。
show boolean
默认值:true
data-show 当初始化时显示模态框。
remote path
默认值:false
data-remote 使用 jQuery .load 方法,为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href,则会加载其中的内容。如下面的实例所示:

<a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a>

方法

模态弹出窗还支持四种类型的事件,分别是模态弹出窗的弹出前、弹出后,关闭前、关闭后,具体描述如下:

事件类型

描述

show.bs.modal

在show方法调用时立即触发(尚未显示之前);如果单击了一个元素,那么该元素将作为事件的relatedTarget属性

shown.bs.modal

该事件在模态弹出窗完全显示给用户之后(并且等CSS动画完成之后)触发;如果单击了一个元素,那么该元素将作为事件的relatedTarget事件

hide.bs.modal

在hide方法调用时(但还未关闭隐藏)立即触发

hidden.bs.modal

该事件在模态弹出窗完全隐藏之后(并且CSS动画漂完成之后)触发

  

        $('#myModal03').on('show.bs.modal', function () {
        $('.modal-backdrop').css({ "z-index": "1060" });
          })
        $('#myModal03').on('hide.bs.modal', function () {
        $('.modal-backdrop').css({ "z-index": "999" })
        })

BootStrap 模态框禁用空白处点击关闭
模态框为信息编辑窗口,涉及好多内容,填了半天,若一不小心点了空白处.....

$('#myModal').modal({backdrop: 'static', keyboard: false});

backdrop:static时,空白处不关闭.

keyboard:false时,esc键盘不关闭.

bootstrapt model 的多罩层,禁用罩层的更多相关文章

  1. 深入理解--SSM框架中Dao层,Mapper层,controller层,service层,model层,entity层都有什么作用

    SSM是sping+springMVC+mybatis集成的框架. MVC即model view controller. model层=entity层.存放我们的实体类,与数据库中的属性值基本保持一致 ...

  2. java中Action层、Service层和Dao层的功能区分

    Action/Service/DAO简介: Action是管理业务(Service)调度和管理跳转的. Service是管理具体的功能的. Action只负责管理,而Service负责实施. DAO只 ...

  3. 23、ASP.NET MVC入门到精通——业务层和数据层父类及接口-T4模板

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 在上一篇中,我们已经把项目的基本框架搭起来了,这一篇我们就来实现业务层和数据层的父接口及父类. 1.我们先来定义一个业务层父接口IBaseB ...

  4. 032医疗项目-模块三:药品供应商目录模块——供货商药品目录查询功能----------Service层和Action层和调试

    我们上一篇文章讲了Dao层代码: 这一篇我们讲解Service层和Action层: Service层: 分为接口和实现类,我们主要看实现类:GysemplServiceImpl package yyc ...

  5. MVC项目实践,在三层架构下实现SportsStore-02,DbSession层、BLL层

    SportsStore是<精通ASP.NET MVC3框架(第三版)>中演示的MVC项目,在该项目中涵盖了MVC的众多方面,包括:使用DI容器.URL优化.导航.分页.购物车.订单.产品管 ...

  6. 一个项目中说系统分为表现层、控制层、逻辑层、DAO层和最终数据库五层架构-转

    表现层就是看到的东西,比如你现在看到的当前页面控制层就将你的请求从页面传到后台代码逻辑层就是处理你的请求的代码DAO层就是将数据存到数据库中的代码数据库就是数据库了,存东西用的 ,DAO层就是将访问数 ...

  7. [转]JAVA中Action层, Service层 ,modle层 和 Dao层的功能区分

    首先这是现在最基本的分层方式,结合了SSH架构.modle层就是对应的数据库表的实体类.Dao层是使用了Hibernate连接数据库.操作数据库(增删改查).Service层:引用对应的Dao数据库操 ...

  8. asp.net mvc 简单项目框架的搭建过程(一)对Bll层和Dal层进行充分解耦

    学习asp.net 已经有近三个月的时间了,在asp.net mvc上花的时间最多,但个人真是有些菜,不得不说,asp.net mvc的水真的还是蛮深的.目前在公司实习,也见过公司几个项目的代码了.对 ...

  9. Java中Action层、Service层、Modle层和Dao层的功能区分

    一.Java中Action层.Service层.Modle层和Dao层的功能区分: 首先,这是现在最基本的分层方式,结合了SSH架构. modle层就是对应的数据库表的实体类.(即domain) Da ...

  10. 系统管理模块_部门管理_改进_抽取添加与修改JSP页面中的公共代码_在显示层抽取BaseAction_合并Service层与Dao层

    系统管理模块_部门管理_改进1:抽取添加与修改JSP页面中的公共代码 commons.jspf <%@ page language="java" import="j ...

随机推荐

  1. awk 合并文件

      问题描述:两个文件a.dat, b.dat a.dat 0    100 1    99 2    93 3    90 ... b.dat 0   0 1   3 2   0 3   2 ... ...

  2. LeetCode Number of Connected Components in an Undirected Graph

    原题链接在这里:https://leetcode.com/problems/number-of-connected-components-in-an-undirected-graph/ 题目: Giv ...

  3. Android EditText组件drawableLeft属性设置的图片和hint设置的文字之间的距离

    有的时候,我们需要在文本框里放置icon图片,并且设置默认提示文字的时候,需要设置两者之间的间距,如下图: 这里想设置的就是之前的手机icon和”请输入手机号“之间的距离,则可是使用以下的方式: &l ...

  4. Android drawText获取text宽度的三种方式

    String str = "Hello";canvas.drawText( str , x , y , paint); //1. 粗略计算文字宽度Log.d(TAG, " ...

  5. select2插件的使用

    <select id="prd_tech_for_load" class="selectable" style="width:180px;&qu ...

  6. 去除行内(inline/inline-block)元素之间的间距

    先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...

  7. 创建XMLHttpRequest对象方法

    ~~~ //创建XMLHttpRequest对象 function creatXmlHttpRequest() { var xmlHttp; try{ //非IE浏览器使用 xmlHttp = new ...

  8. JAVA NIO系列(四) 选择器

    前面介绍过Channel.Buffer,后面的文章主要讲解Selector的实践以及实现原理,选择器的概念比起通道.缓冲区要复杂一些,并且选择器是NIO中最重要的一部分内容. 为什么使用Selecto ...

  9. SQL语法粗整理

    1.在同一张表中,对前一条数据进行更新性插入操作,即:

  10. box-flex不均分问题

    解决box-flex不均等分的问题 我想当你上手css3的时候后一定为他的强大而感到震惊,但是震惊之后带来的一定是苦恼,因为他太TM变态了! 我之所以这么说是因为我今天写box-flex的时候遇到了一 ...