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实现div闪烁原理及实现代码
Jun 24 Javascript
js实现汉字排序的方法
Jul 23 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
JS实现前端缓存的方法
Sep 21 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 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 zend 相对路径问题
2009/01/12 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
Nginx实现反向代理
2017/09/20 Servers
PHP正则表达式笔记与实例详解
2019/05/09 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
web前端开发也需要日志
2010/12/09 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
django基础学习之send_mail功能
2019/08/07 Python
python爬虫请求头的使用
2020/12/01 Python
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
介绍一下游标
2012/01/10 面试题
向领导表决心的话
2014/03/11 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
擅自离岗检讨书
2014/09/12 职场文书
个人总结与自我评价
2015/02/14 职场文书
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
Java 定时任务技术趋势简介
2022/05/04 Java/Android