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 相关文章推荐
javascript之可拖动的iframe效果代码
Aug 01 Javascript
js 表单验证方法(实用)
Apr 28 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
基于iview的router常用控制方式
May 30 Javascript
简单了解JavaScript作用域
Jul 31 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实现批量压缩图片文件大小的脚本
2014/07/04 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
python删除过期文件的方法
2015/05/29 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
在vscode中配置python环境过程解析
2019/09/28 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
中专生求职自荐信范文
2013/12/22 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
2014年财务科工作总结
2014/11/11 职场文书
老公保证书
2015/01/17 职场文书
工商行政处罚决定书
2015/06/24 职场文书
运动会开幕式致辞
2015/07/29 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
如何优化vue打包文件过大
2022/04/13 Vue.js