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 相关文章推荐
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 Javascript
js实现蒙版效果
Jan 11 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 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远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
深入密码加salt原理的分析
2013/06/06 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
语义化 H1 标签
2008/01/14 Javascript
jQuery 渐变下拉菜单
2009/12/15 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
幼师求职信
2014/06/23 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
mybatis 获取更新记录的id
2022/05/20 Java/Android