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滑动门代码
Dec 19 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
JS+HTML5实现图片在线预览功能
Jul 22 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
js之ajax文件上传
May 13 Javascript
微信小程序视图容器(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 八种基本的数据类型小结
2011/06/01 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
Python使用进程Process模块管理资源
2020/03/05 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
python字典key不能是可以是啥类型
2020/08/04 Python
ASP.NET Core中的配置详解
2021/02/05 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
css height属性中的calc方法详解
2021/06/03 HTML / CSS
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server