关于Bootstrap之JS插件模态框的重要注意事项

用modal.js插件的模态框时,根据参考文档写下了如下代码:

$(‘#myModal‘).modal(‘toggle‘).on(‘shown.bs.modal‘, function (e) {

//TODO something

});

运行结果:

chrome正常!

IE8+(低版本没试)不响应事件,竟然不响应事件!

>>排查步骤:

  1. 翻看文档,看有没有介绍此处存在兼容问题,结果没有;
  2. 既然不存在兼容问题,就是代码的编写问题了,问题变得好办了,顺序翻转:

$(‘#myModal‘).on(‘shown.bs.modal‘, function (e) {

//TODO something

}).modal(‘toggle‘);

测试,,,正常了,呵呵!

时间: 2024-10-12 13:52:15

关于Bootstrap之JS插件模态框的重要注意事项的相关文章

Bootstrap历练实例:模态框(Modal)插件

模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:模态框(Modal)插

Bootstrap3.0学习教程十七:JavaScript插件模态框

这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单个*.js文件),或一次性全部引入(使用bootstrap.js或压缩版的bootstrap.min.js). 不要将两份文件全部引入 bootstrap.js和bootstrap.min.js同样是包含了所有插件.区别是:一个没有压缩,一个进行了压缩. 插件之间的依赖 某些插件和CSS组件依赖于其

Bootstrap(v3.2.0)模态框(modal)垂直居中

Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().eq(0).css("position", "absolute").css({ "margin":"0px", "top": function () { return (that.$element.height(

Bootstrap transition.js 插件详解

Bootstrap transition.js 插件详解 时间 2015-01-27 12:12:00 博客园-原创精华区 原文  http://www.cnblogs.com/xyzhanjiang/p/4252513.html 主题 Bootstrap JavaScript Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡.下面先来简单了解下 CSS 过渡

Bootstrap的js插件之弹出框(popover)

data-toggle="popover"--使弹出框能够切换状态: title--设置弹出框的标题: data-content--设置弹出框的内容部分: data-placement--设置弹出框的方位(top.left.right.bottom,默认为right): data-trigger="focus"--设置焦点事件使用户点击空白处即能切换状态: 更多细节参考示例: <!DOCTYPE html> <html lang="zh_

bootstrap 多按钮共用模态框传自定义参

<!DOCTYPE html><html><head> <title>Bootstrap 实例 - 模态框(Modal)插件事件</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.ba

BootStrap学习(6)_模态框

一.模态框 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果只使用该功能,只引入BootStrap中的 modal.js即可 1.用法: 您可以切换模态框(Modal)插件的隐藏内容: 通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或hre

玩转Bootstrap(JS插件篇)

模态弹出框 一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js). 具体使用如下(或见右侧代码编辑器28-29行): <!-导入jQuery版本库,因为Bootstrap的JavaScript插件依赖于jQuery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js&qu

js实现模态框的拖曳功能

项目中需要对模态框进行拖曳,以便对比模态框和页面中的元素,现demo如下: 1 <!-- saved from url=(0066)https://guguji5.github.io/bs-modal-dragable/bs-modal-dragable.html --> 2 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8&qu