bootstrap学习30--javascript插件--modal dialog
来源:互联网 发布:微软中国程序员薪资 编辑:程序博客网 时间:2024/05/17 02:03
可选大小
通过对 modal-dialog样式后面追加 .modal-lg 或者 .modal-sm 样式来实现 模态框的大小调整
基本格式
<div class="modal" id="myDialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"></div> <div class="modal-body"></div> <div class="modal-footer"></div> </div> </div></div>
data api 调用方式
<button data-toggle="modal" data-target="#myModal">弹框</button>
如果想要实现关闭按钮
data-dismiss = “modal”
js 方式调用窗口
$(“#myModal”).modal(‘show’);
动画效果
.fade
模态框内可以编辑栅格系统
row col-sm-*
配合show.bs.modal的event.relatedTarget 对象 可以绑定data-whatever属性 ,然后传入模态窗口中进行编辑
button上设定 data-* 属性(*自定义)
modal的show.bs.modal 时间 通过event.relatedTarget获取button ,然后通过jq的data(“*”)方法即可获取属性值。
监听事件
show.bs.modal 点击了显示按钮 就能显示
shown.bs.modal 窗口完全显示后 就触发
hide.bs.modal
hidden.bs.model
loaded.bs.modal 远程数据源加载完后
注意事项
- 如果是预设定好的静态内容,data-toggle的作用就是用来隐藏或者显示,只做样式的渲染。
- 问题就在,如果内容通过href的remote方式进行了二次渲染,那么在重新刷新页面之前,所有静态的内容都被刷掉,不会重置,所有实际业务中应该考虑内容刷新重置的方式,所以建议一直使用remote刷新的方式。
阅读全文
0 0
- bootstrap学习30--javascript插件--modal dialog
- Bootstrap插件modal源码的学习
- Bootstrap学习之模态框(Modal)插件
- Bootstrap 模态框(Modal)插件
- Bootstrap 模态框(Modal)插件
- Bootstrap 模态框(Modal)插件
- Bootstrap 模态框(Modal)插件
- Bootstrap 模态框(Modal)插件
- Bootstrap 模态框(Modal)插件
- bootstrap 3 Modal Dialog 上下左右居中
- Bootstrap的Modal源码学习
- Bootstrap的js插件之模态框(modal)
- jQuery Modal bootstrap风格对话框插件
- django bootstrap 向modal插件传递参数
- Create Dynamic Modal Dialog Form in Bootstrap template
- bootstrap学习——javascript插件篇
- bootstrap v3学习笔记之JavaScript插件
- 20161019 bootstrap中javascript插件 学习记录
- 给比特币做一次体检
- iOS 算法~十大算法基础总结
- 《算法初步》
- JAXB出现URI Not Absolute异常的解决方案
- 分享】diy 漂亮的 n 格 (適用於可以 diy 的任何版本)
- bootstrap学习30--javascript插件--modal dialog
- Java反射机制的原理与简单使用
- mysql事物处理的四大特征和简单用法
- 基于Soot的Java程序分析生存手册(一)
- 【QT】列表控件之右键编辑
- Python的hasattr() getattr() setattr()使用
- Java配置----JDK开发环境搭建及环境变量配置
- JavaWeb(九)HttpSession和登陆案例
- Android中ExpandableListView的使用