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 相关文章推荐
js 数组的for循环到底应该怎么写?
May 31 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
BootStrap 导航条实例代码
May 18 Javascript
VueJs组件prop验证简单介绍
Sep 12 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
React Native登录之指纹登录篇的示例代码
Nov 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通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
原生js实现随机点名
2020/07/05 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
跟老齐学Python之for循环语句
2014/10/02 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
python正则表达式面试题解答
2020/04/28 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
联谊活动策划书
2014/01/26 职场文书
九年级科学教学反思
2014/01/29 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
体育活动总结
2015/02/04 职场文书
开业庆典致辞
2015/08/01 职场文书
部门主管竞聘书
2015/09/15 职场文书
MySQL系列之十二 备份与恢复
2021/07/02 MySQL