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 相关文章推荐
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
javascript实现贪吃蛇小游戏
Jul 28 Javascript
vue+elementUI实现简单日历功能
Sep 24 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通过session防url攻击方法
2014/12/10 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
原生js实现3D轮播图
2020/03/21 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
Python引用计数操作示例
2018/08/23 Python
python 异或加密字符串的实例
2018/10/14 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
python 整数越界问题详解
2019/06/27 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
Python文件路径名的操作方法
2019/10/30 Python
英国女装网上商店:I Saw It First
2018/10/18 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
《社戏》教学反思
2014/04/15 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
租车协议书范本2014
2014/11/17 职场文书
学校国庆节活动总结
2015/03/23 职场文书
工程催款通知书
2015/04/17 职场文书
公司周年庆寄语
2019/06/21 职场文书
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS