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 Tab 导航插件 (23个)
Jun 11 Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
React组件对子组件children进行加强的方法
Jun 23 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
JS正则表达式验证密码强度
Mar 18 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 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+mysql留言本源码
2009/11/11 PHP
php header Content-Type类型小结
2011/07/03 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
python网络编程学习笔记(四):域名系统
2014/06/09 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
使用python爬取B站千万级数据
2018/06/08 Python
django 自定义过滤器的实现
2019/02/26 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
keras:model.compile损失函数的用法
2020/07/01 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
新闻专业学生的自我评价
2014/02/13 职场文书
企业法人授权委托书
2014/04/03 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
canvas实现贪食蛇的实践
2022/02/15 Javascript
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android