脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap模态对话框

Bootstrap模态对话框用法简单示例

 更新时间：2018年08月31日 11:21:40   作者：涵涵YH  
这篇文章主要介绍了Bootstrap模态对话框用法,结合实例形式分析了Bootstrap模态对话框的简单创建与使用操作技巧,需要的朋友可以参考下

本文实例讲述了Bootstrap模态对话框用法。分享给大家供大家参考，具体如下：

环境：bootstrap-3.3.5,jquery-3.0.0

代码：

<!DOCTYPE html>
<html>
  <head>
  <title>www.jb51.net 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.jb51.net/code/HtmlJsRun测试，可得到如下显示效果：

PS：关于bootstrap布局，这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用：

在线bootstrap可视化布局编辑工具：
http://tools.jb51.net/aideddesign/layoutit

希望本文所述对大家基于bootstrap的程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 文本框回车提交与禁止提交示例

    文本框回车提交与禁止提交示例

    文本框输入数据后使用回车进行提交，想必大家都尝试过吧，在本文有个不错的示例，喜欢的朋友可以参下
    2013-09-09
  • 详解如何在TypeScript中声明全局变量

    详解如何在TypeScript中声明全局变量

    本文主要介绍了如何在 TypeScript 中声明全局变量,在TypeScript中,可以使用declare关键字来声明全局变量,这样的声明告诉编译器该变量是在其他地方定义的,而不需要实际的实现,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • javascript获取wx.config内部字段解决微信分享

    javascript获取wx.config内部字段解决微信分享

    这篇文章主要介绍了javascript获取wx.config内部字段解决微信分享,需要的朋友可以参考下
    2016-03-03
  • 微信小程序ajax实现请求服务器数据及模版遍历数据功能示例

    微信小程序ajax实现请求服务器数据及模版遍历数据功能示例

    这篇文章主要介绍了微信小程序ajax实现请求服务器数据及模版遍历数据功能,结合实例形式分析了微信小程序ajax调用及模板wx:for循环列表渲染相关操作技巧,需要的朋友可以参考下
    2017-12-12
  • 详解JavaScript中Arguments对象用途

    详解JavaScript中Arguments对象用途

    本文主要介绍了详解JavaScript中Arguments对象用途，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • JavaScript 格式化金额常见方法

    JavaScript 格式化金额常见方法

    这篇文章主要介绍了JavaScript 格式化金额最常见方法，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-05-05
  • ts封装axios最佳实践示例详解

    ts封装axios最佳实践示例详解

    这篇文章主要为大家介绍了ts封装axios最佳实践示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • JavaScript实现伸缩二级菜单

    JavaScript实现伸缩二级菜单

    这篇文章主要为大家详细介绍了JavaScript实现伸缩二级菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 如何解决前端笔记本屏幕显示缩放比例125%,150%对页面布局的影响

    如何解决前端笔记本屏幕显示缩放比例125%,150%对页面布局的影响

    如果要完整解决该缩放和布局问题,仍需适配,下面这篇文章主要给大家介绍了关于如何解决前端笔记本屏幕显示缩放比例125%,150%对页面布局的影响,需要的朋友可以参考下
    2022-11-11
  • JavaScript 数组展平方法: flat() 和 flatMap()详解

    JavaScript 数组展平方法: flat() 和 flatMap()详解

    从 ES2019 中开始引入了一种扁平化数组的新方法，可以展平任何深度的数组，这篇文章主要介绍了JavaScript 数组展平方法: flat() 和 flatMap()详解,需要的朋友可以参考下
    2023-06-06

最新评论