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 相关文章推荐
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
使用js获取伪元素的content实例
Oct 24 Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
微信小程序视图容器(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
人族 TERRAN 概述
2020/03/14 星际争霸
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
js原型链原理看图说明
2012/07/07 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
python同步windows和linux文件
2019/08/29 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
软件配置管理有什么好处
2015/04/15 面试题
优秀英语专业毕业生求职信
2013/11/23 职场文书
业务副厂长岗位职责
2014/01/03 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
离婚案件被告代理词
2015/05/23 职场文书
对学校的意见和建议
2015/06/04 职场文书
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
变长双向rnn的正确使用姿势教学
2021/05/31 Python
我的收音机情缘
2022/04/05 无线电
如何优化vue打包文件过大
2022/04/13 Vue.js