Bootstrap实现模态框效果


Posted in Javascript onSeptember 30, 2019

一、模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

二、如果想要单独引用该插件的功能,那么您需要引用 modal.js。或者可以引用 bootstrap.js 或压缩版的 bootstrap.min.js

引入之后直接上代码示例:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8"> 
 <title>Bootstrap 实例 - 模态框(Modal)插件</title>
 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" >
 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
 
 <h2>创建模态框(Modal)</h2>
 <!-- 
 按钮触发模态框:
 class="btn btn-primary btn-lg":是指定class为"按钮的加大primary"样式
 data-toggle="modal":应该是模态框的固定写法,只能为modal,至少自己试验发现是这样的
 data-target="#myModal":通过选择器指向 id="myModal" 的元素,也就是要显示和隐藏的模态框目标
 -->
 <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 开始演示模态框
 </button>
 <!-- 模态框(Modal) -->
 <!-- 
 class="modal fade": modal——用来把div识别成模态框 fade——当模态框被切换时,内容会淡入淡出
 id="myModal":就是被指定为上面说的data-target属性选择的元素
 tabindex:属性规定元素的 tab 键控制次序
 aria-labelledby="myModalLabel":引用模态框的标题(去掉影响不大)
 aria-hidden:="true":设置模态框不可见,等到点击按钮之后显示
 -->
 <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">
 <!-- data-dismiss="modal":加上这个,使得点击该button时会关闭模态框,下面的关闭按钮也是一样加了这个属性 -->
 <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">
 <input type="text" placeholder="输入......">
 </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>
 </body>
</html>

运行效果图如下:

Bootstrap实现模态框效果

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是关于本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
vue-cli的工程模板与构建工具详解
Sep 27 Javascript
Vue formData实现图片上传
Aug 20 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 Javascript
Webpack3+React16代码分割的实现
Mar 03 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 #Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 #Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 #Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 #Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 #Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 #Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 #Javascript
You might like
基于PHP实现等比压缩图片大小
2016/03/04 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
NumPy 数组使用大全
2019/04/25 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
python 写一个水果忍者游戏
2021/01/13 Python
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
公益活动策划方案
2014/01/09 职场文书
幼儿园校车司机的岗位职责
2014/01/30 职场文书
社区居务公开实施方案
2014/03/27 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书