浅析BootStrap中Modal(模态框)使用心得

前端之家收集整理的这篇文章主要介绍了浅析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

对应导入代码

1.4、从官网找到一个案例使用:

创建模态框(Modal)

二、modal打开:

2.1、静态打开:通过data属性打开隐藏模态框

设置按钮button的data-toggle:"modal"(以模态框的形式打开),data-target:"#myModal"(设置为modal的id)

2.2、动态打开:以jquery代码为例

调用jquery load方法加载数据 backdrop:"static";//指定一个静态背景,当用户点击背景处,modal界面不会消失 keyboard:true;//当按下esc键时,modal框消失 })

remote处可以填写jsp路径或者html路径,用来给modal框注入内容

2.3、动态打开事件:

在modal框加载同时,提供几个方法用来控制modal框

方法后调用 }); $("#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框钱移除节点数据。

解决方案:

2.5、解决事件监听多次:

第一次打开modal框正常,第二次,第三次,第n次打开就有可能会出现事件监听多次的奇怪问题(尤其是多个modal窗口叠加,出现这种问题的几率更高,我大致判断有可能是组件bug),所以无奈之举的办法,只适合应急使用:就是强行让他只调用监听一次

调用你需要的方法 } //在模态框加载的同时做一些动作 });

总结:modal框是个很好用的组件,不过官方文档提醒最好不要多个modal叠加很容易出现很难解决的前端组件问题。

以上所述是小编给大家介绍的浅析BootStrap中Modal(模态框)使用心得。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Bootstrap相关文章