浅析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 相关文章推荐
基于jQuery的弹出框插件
Mar 18 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
详解webpack babel的配置
Jan 09 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
js实现炫酷光感效果
Sep 05 Javascript
JS实现数组去重的11种方法总结
Apr 04 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 array_intersect()函数使用代码
2009/01/14 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
js new Date()实例测试
2019/10/31 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
语文教育专业应届生求职信
2013/11/23 职场文书
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
团结友爱主题班会
2015/08/13 职场文书
初中美术教学反思
2016/02/17 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
python 安全地删除列表元素的方法
2022/03/16 Python