Bootstrap模态对话框用法简单示例


Posted in Javascript onAugust 31, 2018

本文实例讲述了Bootstrap模态对话框用法。分享给大家供大家参考,具体如下:

环境:bootstrap-3.3.5,jquery-3.0.0

代码:

<!DOCTYPE html>
<html>
  <head>
  <title>3water.com bootstrap模态对话框</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="external nofollow" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="external nofollow" />
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js" ></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js" ></script>
  </head>
  <body>
<h2>创建模态框(Modal)</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal"
  data-target="#myModal">
  开始演示模态框
</button>
<!-- 模态框(Modal) -->
<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">
      <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">
      在这里添加一些文本
     </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相关css、js文件全部换成了cdn形式,方便测试。

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试,可得到如下显示效果:

Bootstrap模态对话框用法简单示例

Javascript 相关文章推荐
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
jQuery+HTML5实现弹出创意搜索框层
Dec 29 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
JS实现电商商品展示放大镜特效
Jan 07 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 Javascript
Vue3为什么这么快
Sep 23 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 #Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 #Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 #Javascript
JS实现字符串翻转的方法分析
Aug 31 #Javascript
angular实现input输入监听的示例
Aug 31 #Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 #Javascript
Angular2中监听数据更新的方法
Aug 31 #Javascript
You might like
PHP中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
使用apache模块rewrite_module (转)
2007/02/14 PHP
PHP 模拟$_PUT实现代码
2010/03/15 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
高级护理专业毕业生推荐信
2013/12/25 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
2014年客房部工作总结
2014/11/22 职场文书
九华山导游词
2015/02/03 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
golang 如何通过反射创建新对象
2021/04/28 Golang