模态框 modal data-toggle data-target

 

1. Data-*属性 模态框(modal) 触发事件(data-toggle) 触发对象data-target(ID 或类)

2. 关闭所有data事件$(document).off(“.data-api”);

关闭某个data事件$(document).off(“.button.data-api”)

3. 接受三种不同类型的参数:

$(‘#myModal’).modal()

$(‘#myModal’).modal({keyboard:false})

$(‘#myModal).modal(‘show’)

4. 事件:$(‘#myModal’).on(‘show.bs.modal’,function(e){…})

获取版本信息:$.fn.tooltip.Constructor.VERSION

5. Modal>modal-dialog>modal-content>modal-header(>modal-title)+modal-body+modal-footer

模态框大小modal-lg(大) modal-sm(小)  默认表示正常

Data属性:data-toggle=”modal”  data-target=” #ID(.类)”

6. data-backdrop (true[单击黑色背景会关闭当前弹窗] false[单击不变背景并不会关闭当前弹窗] static[单击黑色背景并不会关闭当前弹窗]])

Data-keyboard(true[不变背景按ESC按不会关闭当前弹窗]  false[黑色背景按ESC会关闭当前弹窗])

Data-show显示当前模态窗

 <div class="container">
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#myModal-lg" data-backdrop="static">大对话框 </button>
<div class="modal fade" id="myModal-lg">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span aria-hidden="true">× </span>
</button>
<h4 class="modal-title">大对话框 </h4>
</div>
<div class="modal-body">
<p>在弹出框显示的过程会有一个过渡效果大对话框宽度 </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button>
<button type="button" class="btn btn-primary">保存 </button>
</div>
</div>
</div>
</div>
<a href="#" id="btnDialog">小对话框 </a>
<div class="modal fade" id="myModal-sm">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span aria-hidden="true">× </span>
</button>
<h4 class="modal-title">小对话框 </h4>
</div>
<div class="modal-body">
<p>在弹出框显示的过程会有一个过渡效果小对话框宽度 </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button>
<button type="button" class="btn btn-primary">保存 </button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.2.3.min.js" > </script>
<script type="text/javascript" src="js/bootstrap.min.js" > </script>
<script language="JavaScript">
$(document).ready(function(){
$('#btnDialog').click(function(){
$('#myModal-sm').modal({
backdrop:"static"
});
});
});
</script>

7.  事件 show.bs.modal在模态框弹出前执行  shown.sb.modal在模态框弹出后执行

Hide.bs.modal在模态框隐藏前执行 hidden.bs.modal在模态框隐藏后执行

$(‘#myModal-sm’).modal(“toggle”)   $(‘#myModal-sm’).modal(“show”)

$(‘#myModal-sm’).on(‘show.sb.modal’,function(e){
Alert(“show.bs.modal”);
});

8. 下拉菜单绑定事件 $('#dropMenu').dropdown("toggle");

事件: show.bs.dropdown  shown.bs.dropdown hide.bs.dropdown hidden.bs.dropdown

$(‘#.dropdown’).on(‘show.sb.modal’,function(){
Alert(“show.bs.dropdown”);
});

https://www.cnblogs.com/xszjk/articles/5517937.html

模态框 modal data-toggle data-target的更多相关文章

  1. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

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

    Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...

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

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...

  4. Bootstrap3模态框Modal垂直居中样式

    1,Bootstrap 模态框插件Bootbox垂直居中样式: <!DOCTYPE html> <html lang="en"> <head> ...

  5. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

  6. vue2.X 自定义 模态框 modal

    1.自定义 modal Modal.vue <!-- 模态框 --> <template> <div class="modal-mask" v-sho ...

  7. bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法

    bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容 ...

  8. 黄聪:bootstrap中模态框modal在苹果手机上会失效

    bootstrap中模态框在苹果手机上会失效 可将代码修改为<a  data-toggle="modal" data-target="#wrap" hre ...

  9. 模态框MODAL的一些事件捕捉

    下表列出了模态框中要用到事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.modal 在调用 show 方法后触发. $('#identifier').on('show.bs.m ...

随机推荐

  1. hTML 如何在不同页面上传递参数( 1 )

    (1).一种是重定向跳转,超连<a>就是一种重定向跳转,这样的跳转request对象是传不到下一个页面的,下一个页面得到的request对象是一个新的对象,而不是上一个页面传过来的就得不到 ...

  2. bootstrap+Ajax+SSM(maven搭建)实现增删改查

    https://www.jianshu.com/p/d76316b48e3e 源码: https://github.com/Ching-Lee/crud 功能点: 分页 数据校验 ajax Rest风 ...

  3. Spring Cloud Config(配置中心)

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 一.简介 Spring Cloud Config为分布式系统中的外部配置提供服务器和客 ...

  4. js如何获取跨域iframe 里面content

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 其中src可能存在跨域. 现有的获取方式   var test = document. ...

  5. 第2章 认识JAVA虚拟机的基本结构

    2.1 虚拟机的内存划分 垃圾回收系统既回收堆,也回收方法区和直接内存 直接内存其实是一块不受JVM管理的内存,但是收到计算机内存的限制 2.2 虚拟机参数 -Xmx:虚拟机最大可用内存 2.3 堆 ...

  6. LeetCode练习2 两数相加

    问题如下: 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来 ...

  7. 【angularjs】pc端使用angular搭建项目,实现导出excel功能

    此为简单demo. <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset= ...

  8. iScroll.js 向上滑动异步加载数据回弹问题

    iScroll是一款用于移动设备web开发的一款插件.像缩放.下拉刷新.滑动切换等移动应用上常见的一些效果都可以轻松实现. 现在最新版本是5.X,官网这里:http://iscrolljs.com/ ...

  9. JenKins自动化构建部署流程参考

    Jenkins工作流程 程序员提交代码到Git/SVN仓库,触发钩子程序向 JenKins 进行通知,Jenkins 调用Git/SVN插件获取源码,调用Maven打包为war包,调用Deploy t ...

  10. @vue/cli 3 打包文件读取绝对路径处理

    @vue/cli 3 封装了 webpack.config.js,一般都在 vue.config.js 里面配置,官网不推荐在 webpack 的 output 处理,这里踩了一下坑,希望可以帮到后面 ...