浅析BootStrap中Modal模态框使用心得
BootStrap中Modal(模态框)描述
Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能。您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件)。
一、modal使用:
1.1、登录bootstrap官网,点击下载Bootstrap
1.2、导入对应的样式文件css
1.3、导入对应的js
,需要导入bootstrap.js或者bootstrap.min.js
文件,bootstrap的前提是jQuery,所以我们要在导入bootstrap.js前面导入jquery.min.js
对应导入代码:
rush:js;">
1.4、从官网找到一个案例使用:
rush:js;">
创建模态框(Modal)
二、modal打开:
2.1、静态打开:通过data属性打开隐藏模态框
设置按钮button的data-toggle:"modal"
(以模态框的形式打开),data-target:"#myModal"
(设置为modal的id)
2.2、动态打开:以jquery代码为例
rush:js;">
$("#myModal").modal({
remote:"test/test.jsp";//可以填写
一个url,会
调用jquery load
方法加载数据
backdrop:"static";//指定
一个静态背景,当
用户点击背景处,modal界面不会消失
keyboard:true;//当按下esc键时,modal框消失
})
remote处可以填写jsp路径或者html路径,用来给modal框注入内容
2.3、动态打开事件:
在modal框加载同时,提供几个方法用来控制modal框
rush:js;">
$("#myModal").on("loaded.bs.modal",function{
//在模态框加载的同时做一些动作
});
$("#myModal").on("show.bs.modal",function{
//在show
方法后
调用
});
$("#myModal").on("shown.bs.modal",function{
//在模态框完全展示出来做一些动作
});
$("#myModal").on("hide.bs.modal",function{
//hide
方法后
调用
});
$("#myModal").on("hiden.bs.modal",function{
//监听模态框隐藏事件做一些动作
});
2.4、解决remote只加载一次问题:
我们在使用js动态打开modal框使用remote请求数据,只会加载一次数据,所以我们需要在每次打开modal框钱移除节点数据。
rush:js;">
$("#myModal").on("hiden.bs.modal",function{
$(this).removeData("bs.modal");
});
2.5、解决事件监听多次:
第一次打开modal框正常,第二次,第三次,第n次打开就有可能会出现事件监听多次的奇怪问题(尤其是多个modal窗口叠加,出现这种问题的几率更高,我大致判断有可能是组件bug),所以无奈之举的办法,只适合应急使用:就是强行让他只调用监听一次
rush:js;">
int count = 0 ;
$("#myModal").on("loaded.bs.modal",function{
if(++count == 1){
//
调用你需要的
方法
}
//在模态框加载的同时做一些动作
});
总结:modal框是个很好用的组件,不过官方文档提醒最好不要多个modal叠加很容易出现很难解决的前端组件问题。
以上所述是小编给大家介绍的浅析BootStrap中Modal(模态框)使用心得。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。