Bootstrap 模态框自定义点击和关闭事件详解

 更新时间:2018年08月10日 14:21:29   作者:Lucy-  
今天小编就为大家分享一篇Bootstrap 模态框自定义点击和关闭事件详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

模态框避免点击背景处关闭:

1、div初始化时添加属性 aria-hidden=”true” data-backdrop=”static”

<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden='true' data-backdrop='static'>

2、在需要显示模态框,初始化时

$(‘#myModal').modal({
backdrop: ‘static', 
//点击背景空白处不被关闭; 
keyboard: false
//触发键盘esc事件时不关闭。
}); 

自定义模态框显示和关闭触发事件:

 $(".classname").click(function () {
   $('#mymodel').modal('show');
    alert('模态框打开了');
  });

 $('#mymodel').on('hide.bs.modal', function () {
   alert('模态框关闭了');
 });

以上这篇Bootstrap 模态框自定义点击和关闭事件详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 基于javascript实现listbox左右移动

    基于javascript实现listbox左右移动

    这篇文章主要介绍了基于javascript实现listbox左右移动的相关资料,以一个完整的实例代码分析了js实现listbox左右移动的相关技巧,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 使用sql.js实现前端SQLite数据库操作

    使用sql.js实现前端SQLite数据库操作

    sql.js 是将 SQLite 数据库编译为 JavaScript 的库,允许开发者在浏览器环境中直接操作 SQLite 数据库,本文主要介绍了如何使用sql.js实现多张表的关联操作,需要的可以了解下
    2024-12-12
  • javascript中setInterval的用法

    javascript中setInterval的用法

    这篇文章主要介绍了javascript中setInterval的用法的相关资料,需要的朋友可以参考下
    2015-07-07
  • 动态为事件添加js代码示例

    动态为事件添加js代码示例

    动态添加事件的实现代码
    2009-02-02
  • 生产制造追溯系统之再说条码打印

    生产制造追溯系统之再说条码打印

    这篇文章主要介绍了生产制造追溯系统之再说条码打印,本文图文并茂给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • javascript实现倒计时关闭广告

    javascript实现倒计时关闭广告

    这篇文章主要为大家详细介绍了javascript实现倒计时关闭广告,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02
  • webpack cjs运行时分析示例详解

    webpack cjs运行时分析示例详解

    这篇文章主要介绍了webpack cjs运行时分析,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果

    bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果

    这篇文章主要给大家介绍了关于利用bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果的相关资料,文中给出了完整的示例代码供大家参考学习,对大家具有一定的参考学习价值,需要的朋友下面来一起看看吧。
    2017-06-06
  • JS实现仿微博可关闭弹出层效果

    JS实现仿微博可关闭弹出层效果

    这篇文章主要介绍了JS实现仿微博可关闭弹出层效果,涉及JavaScript弹出窗口的设置及页面元素动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • JavaScript 转义字符JSON parse错误研究

    JavaScript 转义字符JSON parse错误研究

    这篇文章主要为大家介绍了JavaScript 转义字符JSON parse错误研究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10

最新评论