除了通过data-toggle和data-target来控制模态弹出窗之外,Bootstrap框架针对模态弹出框还提供了其他自定义data-属性,来控制模态弹出窗。比如说:是否有灰色背景modal-backdrop,是否可以按ESC键关闭模态弹出窗。有关于Modal弹出窗自定义属性相关说明如下所示:

JavaScript触发时的参数设置

$(function(){
$(".btn").click(function(){
$("#mymodal").modal({
backdrop:false,
keyboard:false});
});
});

参数设置:

在Bootstrap框架中还为模态弹出窗提供了三种参数设置,具体说明如下:

事件设置:

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

$(function(){
$(".btn").click(function(){
$("#mymodal").modal("toggle");
});
$('#mymodal').on('show.bs.modal', function (e) {
alert("在show方法调用时立即触发(尚未显示之前);如果单击了一个元素,那么该元素将作为事件的relatedTarget属性");
});
$('#mymodal').on('shown.bs.modal', function (e) {
alert("该事件在模态弹出窗完全显示给用户之后(并且等CSS动画完成之后)触发;如果单击了一个元素,那么该元素将作为事件的relatedTarget事件");
});
$('#mymodal').on('hide.bs.modal', function (e) {
alert("在hide方法调用时(但还未关闭隐藏)立即触发");
});
$('#mymodal').on('hidden.bs.modal', function (e) {
alert("该事件在模态弹出窗完全隐藏之后(并且CSS动画漂完成之后)触发");
});
});

data-参数说明(模态弹出窗的使用)的更多相关文章

  1. bootstrap-data-target触发模态弹出窗元素的data使用 data-toggle与data-target的作用 深入ASP.NET MVC之九:Ajax支持 Asp.Net MVC4系列--进阶篇之AJAX

    bootstrap-data-target触发模态弹出窗元素的data使用 时间:2017-05-27 14:22:34      阅读:4479      评论:0      收藏:0      [ ...

  2. Bootstrap模态弹出窗

    Bootstrap模态弹出窗有三种方式: 1.href触发模态弹出窗元素: <a class="btn btn-primary" data-toggle="moda ...

  3. iOS:模态弹出窗控制器UIPopoverPresentationController

    模态弹出窗控制器:UIPopoverPresentationController 实质:就是将内容控制器包装成PopoverPresentationController的形式,然后再模态出来,必须指定 ...

  4. Bootstrap模态弹出框

    前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...

  5. bootstrap学习--模态弹出框modals轮子

    1.点击按钮型 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"> ...

  6. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-4 模态弹出框--结构分析

    模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-con ...

  7. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-3 模态弹出框

    模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...

  8. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-2 动画过渡

    动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...

  9. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-1导入JavaScript插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

随机推荐

  1. 【做题记录】USACO silver * 50(第一篇)

    由于我太菜,决定按照AC人数从小到大慢慢做. BZOJ开了权限号真的快了好多诶~ 29/50 1606: [Usaco2008 Dec]Hay For Sale 购买干草 背包dp 1610: [Us ...

  2. SQL、PL/SQL、DDL、DML、TCL介绍

    SQL:结构化查询语言(Structured Query Language) PL/SQL:过程化SQL语言(Procedural Language/SQL) DDL(Data Definition ...

  3. Promise题目

    setTimeout(function () { console.log(1); }, 0) new Promise(function executor(resolve) { console.log( ...

  4. 在ubuntu中添加新硬盘

    在ubuntu中添加新硬盘 转载于 http://www.cnblogs.com/unipower/archive/2009/03/08/1406230.html  前言 安装新硬盘这种事情并不会经常 ...

  5. django之管理静态文件

    管理静态文件 项目中的CSS.图片.js都是静态文件 配置静态文件 在settings 文件中定义静态内容 STATIC_URL = '/static/' STATICFILES_DIRS = [ o ...

  6. MySQL5.5安装与多实例

    MySQL5.5编译安装 #1.2 cmake软件 cd /home/oldboy/tools/ tar xf cmake-2.8.8.tar.gz cd cmake-2.8.8 ./configur ...

  7. Django中多种重定向方法使用

    本文主要讲解使用HttpResponseRedirect.redirect.reverse以及配置文件中配置URL等重定向方法 本文使用了Django1.8.2 使用场景,例如在表单一中提交数据后,需 ...

  8. 用Python将word文件转换成html(转)

    用Python将word文件转换成html   序 最近公司一个客户大大购买了一堆医疗健康方面的科普文章,希望能放到我们正在开发的健康档案管理软件上.客户大大说,要智能推送!要掌握节奏!要深度学习!要 ...

  9. Shiro的Subject和Sessoin的创建

    之前要先了解Session的来源Shiro session和Spring session一样吗? 创建Subject的位置 AbstractShiroFilter . doFilterInternal ...

  10. Set与List之间转化

    List list = new ArrayList(set);Set set = new HashSet(list); //但是有一点,转换当中可能要丢失数据,尤其是从list转换到set的时候,因为 ...