Bootstrap实现模态框效果

一、模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

二、如果想要单独引用该插件的功能，那么您需要引用 modal.js。或者可以引用 bootstrap.js 或压缩版的 bootstrap.min.js

引入之后直接上代码示例：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Bootstrap 实例 - 模态框（Modal）插件</title>
 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" >
 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>

 <h2>创建模态框（Modal）</h2>
 <!--
  按钮触发模态框：
  class="btn btn-primary btn-lg":是指定class为"按钮的加大primary"样式
  data-toggle="modal":应该是模态框的固定写法，只能为modal，至少自己试验发现是这样的
  data-target="#myModal":通过选择器指向 id="myModal" 的元素，也就是要显示和隐藏的模态框目标
 -->
 <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  开始演示模态框
 </button>
 <!-- 模态框（Modal） -->
 <!--
  class="modal fade": modal——用来把div识别成模态框 fade——当模态框被切换时，内容会淡入淡出
  id="myModal":就是被指定为上面说的data-target属性选择的元素
  tabindex：属性规定元素的 tab 键控制次序
  aria-labelledby="myModalLabel":引用模态框的标题(去掉影响不大)
  aria-hidden:="true":设置模态框不可见，等到点击按钮之后显示
 -->
 <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">
   <!-- data-dismiss="modal":加上这个，使得点击该button时会关闭模态框，下面的关闭按钮也是一样加了这个属性 -->
   <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">
   <input type="text" placeholder="输入......">
   </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>

运行效果图如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • BootStrap 模态框实现刷新网页并关闭功能

    方法与实现 hide.bs.modal,当调用 hide 实例方法时触发. $('#identifier').on('hide.bs.modal', function () { // 执行一些动作... }) hidden.bs.modal,当模态框完全对用户隐藏时触发. $('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... }) 源码示例 $('#confirmRevokeOrder').on('hidden.bs.

  • 页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理

    实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为:hidden 废话不多说了,将关键代码贴出来了,兼容火狐,谷歌,ie 遮罩层的样式代码,红色部分是关键的部分 复制代码 代码如下: .cover {position:fixed; top: 0px; right:0px; bottom:0px;filter: alpha(opacity=60); background-color: #777;z-index: 1002; left: 0px

  • Bootstrap模态框禁用空白处点击关闭

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.bootstrap的模态框在默认情况下,点击其他空白区域(通常是遮罩层),模态框会被关闭,那么以下方法就是禁止点击其他区域关闭模态框. $('#myModal').modal({backdrop: 'static', keyboard: false}); backdrop:static时,空白处不关闭. keyboard:false时,esc键盘不

  • 在iframe中使bootstrap的模态框在父页面弹出问题

    在iframe中使bootstrap的模态框在父页面弹出问题

    这几天在写项目的中,页面使用了iframe,然而在子页面中使用bootstrap的模态框时发现:弹出的模态框位置是以子页面为标准居中的,并且遮罩层也只有子页面那一部分,整个页面简直无法直视,所以思考可以可以让模态框以父页面为标准弹出,经过在网上查找资料,总结了一种解决方法. 效果展示 修改前页面 修改后页面 实现思路 要想使模态框在顶级页面打开,我想到的方法是使bootstrap的模态框弹在父页面弹出即可. 首先我们将需要弹出的div单独写一个页面,当子页面需要弹出时,在父页面弹出div即可.

  • Bootstrap每天必学之模态框（Modal）插件

    Bootstrap每天必学之模态框（Modal）插件

    本节课我们主要学习一下 Bootstrap 中的模态框插件, 这是一款交互式网站非常常见的弹窗功能插件. 更多关于Bootstrap模态框插件内容请点击专题<Bootstrap Modal使用教程>进行学习,希望大家喜欢,下面继续 一．基本使用 使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层). dialog(窗口声明层).content(内容层).在内容层里面,还有三层,分别为 header(头部).body(主体).footer(注脚). //基本实例 &l

  • Bootstrap 模态框（Modal）带参数传值实例

    Bootstrap 模态框（Modal）带参数传值实例

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 为了实现父窗体与其的交互,通常需要向其传值,实现带参数的传递,查看数据的唯一性.例如下面窗体:点击任意一个模态框("回复"按钮),如果不做任何处理,则会出现回复混淆,甚至程序出错的情况. 为了实现其回复的唯一性和带参传值的功能,需要做以下处理 实现的效果: 总结 以上所述是小编给大家介绍的Bootstrap 模态框(Modal)带参数传

  • 浅析BootStrap中Modal（模态框）使用心得

    BootStrap中Modal(模态框)描述 Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件). 一.modal使用: 1.1.登录bootstrap官网,点击下载Bootstrap 1.2.导入对应的样式文件css 1.3.导入对应的js,需要导入bootstrap.js或者bootstrap.min.j

  • bootstrap 模态框（modal）实现水平垂直居中显示

    bootstrap 模态框（modal）实现水平垂直居中显示

    众所周知,bootstrap是一款非常实用的CSS框架(主要用于样式的快速搭建),由于其简洁,美观,快捷,响应式等特点备受大家喜欢,但是其本身也是存在很多bug,当应对与具体的业务逻辑的时候往往达不到细节要求,比如今天我要谈的bootstrap的模态框,其默认是显示距离顶端30px,左右居中. 怎么让其在垂直方向也居中呢? 大家可能想加一个CSS样式,让其距离顶部距离变长,实践是检验真理的唯一标准,当你去试过会发现很多问题,在不修改源码的前提下修改插件并没有自由配置的样式一直是前端人员头疼的事情

  • Bootstrap模态框(modal)垂直居中的实例代码

    Bootstrap模态框(modal)垂直居中的实例代码

    Bootstrap官网下载:http://v3.bootcss.com/ 今天就在使用Bootstrap框架中遇到的一个问题分享一下,在产品开发的过程中使用了大量的弹出窗口(modal). 刚开始学习使用的过程中就发现此窗口不能垂直居中,总是偏上,并且不能拖动,看了一下使用说明也没有提供过多的属性设置和方法,就这样使用默认的方式一直用着.最近,客户却提出了一个要求:能不能让弹出窗口居中,因为一些小的窗口偏上总感觉整体页面失衡,大一点的还过得去. 因为之前对Bootstrap也不是很熟悉,便开始b

  • bootstrap模态框消失问题的解决方法

    bootstrap模态框消失问题的解决方法

    小编主要从网上整理了网友提出来的关于bootstrap模态框消失的不同问题,希望对大家有帮助. 状况一:bootstrap模态框瞬间消失解决 bootstrap模态框挺好,但这方面的例子很少,都是官方的代码,网上没有一点新的东西.比如,save changes,即点击确认后如何处理?没有例子.只有取消close的功能.我的需求是这样,点击一个链接,传一个id,打开模态框,进行输入.单选.列表选择等,点模态框确认,然后连同刚才的id.模态框中的各种值,一起提交到后台处理. 第一步:用链接传id并打

随机推荐