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 相关文章推荐
你可能不再需要JQUERY
Mar 09 Javascript
$.ajax json数据传递方法
Nov 19 Javascript
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 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 采集程序 常用函数
2008/12/18 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
JS中的变量作用域(console版)
2020/07/18 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
python实现简单点对点(p2p)聊天
2017/09/13 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
python 初始化一个定长的数组实例
2019/12/02 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
会议开场欢迎词
2014/01/15 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
加拿大探亲邀请信
2014/01/28 职场文书
社区健康教育实施方案
2014/03/18 职场文书
依法行政工作汇报
2014/10/28 职场文书
小学生优秀评语
2014/12/29 职场文书
幼师个人总结范文
2015/02/28 职场文书
员工规章制度范本
2015/08/07 职场文书
P站美图推荐——变身女主角特辑
2022/03/20 日漫
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android