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


Posted in Javascript onDecember 24, 2016

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

对应导入代码:

<!--导入样式-->
<link href="Bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>
<link href="Bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet"/>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<!--导入bootstrap.js包-->
<script src="jquery/jquery-3.1.1.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>

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

<h2>创建模态框(Modal)</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4>
      </div>
      <div class="modal-body">在这里添加一些文本</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><!-- /.modal-content -->
  </div><!-- /.modal -->
</div>

二、modal打开:

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

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

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

$("#myModal").modal({
remote:"test/test.jsp";//可以填写一个url,会调用jquery load方法加载数据
backdrop:"static";//指定一个静态背景,当用户点击背景处,modal界面不会消失
keyboard:true;//当按下esc键时,modal框消失
})

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

2.3、动态打开事件:

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

$("#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框钱移除节点数据。

解决方案:

$("#myModal").on("hiden.bs.modal",function{
$(this).removeData("bs.modal");
});

2.5、解决事件监听多次:

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

int count = 0 ;
$("#myModal").on("loaded.bs.modal",function{
if(++count == 1){
//调用你需要的方法
}
//在模态框加载的同时做一些动作
});

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

以上所述是小编给大家介绍的浅析BootStrap中Modal(模态框)使用心得,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
纯JS实现表单验证实例
Dec 24 #Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 #Javascript
JS绘制微信小程序画布时钟
Dec 24 #Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 #Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 #Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 #Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 #Javascript
You might like
PHP中的string类型使用说明
2010/07/27 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
PHP实现小偷程序实例
2016/10/31 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
一个实用的php验证码类
2017/07/06 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
js getElementsByTagName的简写方式
2010/06/27 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
python处理csv中的空值方法
2018/06/22 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
护理专业自荐信
2013/12/03 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
大学生在校学习的自我评价
2014/02/18 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
文艺晚会策划方案
2014/06/11 职场文书
答谢酒会主持词
2015/07/02 职场文书
办公室管理规章制度
2015/08/04 职场文书