浅析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 相关文章推荐
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
PHP 模拟$_PUT实现代码
2010/03/15 PHP
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
PHP strripos函数用法总结
2019/02/11 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
英国网上购买门:Direct Doors
2018/06/07 全球购物
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
罗技美国官网:Logitech美国
2020/01/22 全球购物
C#面试题问题集
2016/04/02 面试题
Linux的文件类型
2012/03/07 面试题
高中同学会活动方案
2014/08/14 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
简爱读书笔记
2015/06/26 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
go xorm框架的使用
2021/05/22 Golang
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery