bootstrap实现嵌套模态框的实例代码

项目上有一个需求,需要在已经弹出的一个bootstrap模态框的基础上再弹一个模态框。

因为bootstrap官方不建议这么做,最后实现的过程属实不易。

以下是解决方案:

html代码:

<div id="container">
 <a data-toggle="modal" href="#myModal" rel="external nofollow" class="btn btn-primary">弹出第一层模态框</a>
 <!-- 第一层模态框 -->
 <div class="modal fade" id="myModal">
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
           <h4 class="modal-title">第一层模态框</h4>
       </div>
       <div class="container"></div>
       <div class="modal-body">
       <p>第一层模态框</p>
       <br>
       <a data-toggle="modal" href="#myModal2" rel="external nofollow" class="btn btn-primary">弹出第二层模态框</a>
       </div>
       <div class="modal-footer">  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-dismiss="modal" class="btn">关闭</a>
         <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary">保存</a>
       </div>
     </div>
   </div>
 </div>
 <!-- 第二层模态框 -->
 <div class="modal fade rotate" id="myModal2">
   <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">第二层模态框</h4>
       </div>
       <div class="container"></div>
       <div class="modal-body">
         <p>第二层模态框</p>
       </div>
       <div class="modal-footer">
       <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-dismiss="modal" class="btn">关闭</a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary">保存</a>
       </div>
     </div>
   </div>
 </div>
 <!-- 遮罩 -->
 <div id="cover"></div>
</div>

遮罩的css样式:

<style type="text/css">
 <!-- 遮罩是为了第二层模态框弹出时,可以将第一层模态框遮住 -->
 #cover {
 display: none;
 position: fixed;
 background: #000000;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 opacity: 0.40;
 z-index: 1
}
</style>

js代码:

$(document).ready(function (){
 //第二层模态框弹出时,为其设置一个大于第一层模态框的z-index
 //使得第二层模态框可以在第一层模态框上面
 $(document).on('show.bs.modal', '#myModal2', function (event) {
 var zIndex = 1040 + (10 * $('.modal:visible').length+1);
   $(this).css('z-index', zIndex);
   //开启遮罩,遮罩的高度小于第二层模态框
   $("#cover").css('z-index',zIndex-1)
   $('#cover').css('display','block'); //显示遮罩层
 });

 $('#myModal2').on('hide.bs.modal', function() {
 //第二层模态框关闭时,关闭遮罩
 $('#cover').css('display','none');
 });
});

总结

以上所述是小编给大家介绍的bootstrap实现嵌套模态框的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

  • bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码

    模态框嵌套 在开发中,遇到需要通过点击事件触发第一个模态框,触发后通过事件唤起第二个模态框,并且通过事件触发第三个模态框:即模态框嵌套. 模态框嵌套需要用一个模态框包裹所涉及嵌套的模态框,从而点击触发模态框不会乱掉. HTML代码如下: <!--最外层包裹的模态框--> <div class="modal fade" id="outermost" tabindex="-1" role="dialog" ari

  • BootStrap中的模态框(modal,弹出层)功能示例代码

    bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集.务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现或功能. 默认的modal示例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8">

  • Bootstrap 模态框自定义点击和关闭事件详解

    模态框避免点击背景处关闭: 1.div初始化时添加属性 aria-hidden="true" data-backdrop="static" <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden='true'

  • Bootstrap 模态框(Modal)带参数传值实例

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

  • BootStrap点击保存后实现模态框自动关闭的思路(模态框)

    需求如下: 在弹出的模态框中点击 "更换" 按钮后 实现模态框自动关闭, 做法: 给"更换"按钮加上:data-dissmiss="modal" <button type="button" class="btn btn-primary btn-sm"data-dismiss="modal" >更换</button> 总结 以上所述是小编给大家介绍的BootStra

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

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

  • bootstrap实现嵌套模态框的实例代码

    项目上有一个需求,需要在已经弹出的一个bootstrap模态框的基础上再弹一个模态框. 因为bootstrap官方不建议这么做,最后实现的过程属实不易. 以下是解决方案: html代码: <div id="container"> <a data-toggle="modal" href="#myModal" rel="external nofollow" class="btn btn-primary&

  • 如何使用vue slot创建一个模态框的实例代码

    [1]遮罩层:承载内容,管理样式布局. [2]内容层:控制遮罩层的显示与否. 遮罩层和内容区之间应该解耦.遮罩层和内容区之间应该解耦.遮罩层和内容区之间应该解耦. 遮罩层不依赖于内容区,内容是放置在遮罩层里的,至于内容区里的内容是什么,遮罩层完全不用在意.因此可以在遮罩层里采用插槽. 遮罩层的实现 <div class="common-mask" v-if="visible"> <slot name="head"><

  • angularJS模态框$modal实例代码

    1.引入$modal模块 如:angular.module('ModalCtrl',['$modal' ,'$scope' , function($modal ,$scope ){ }]); 2.执行调模态框 函数 $scope.editModule = function(type, size, id) { $scope.id = id; var modalInstance = $modal.open({ templateUrl: 'tpl/weichat_modulebaseinfo.html

  • Bootstrap 模态框(Modal)插件代码解析

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.下面通过代码给大家介绍bootstrap 模态框插件,先给大家展示下效果图: 页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my

  • bootstrap动态调用select下拉框的实例代码

    html代码: <label for="classify" class="col-sm-2 control-label">填报部门:</label> <div class="col-sm-3"> <select class="selectpicker form-control" data-live-search="true" name="addid&quo

  • 实例详解BootStrap的动态模态框及静态模态框

    1.要用bootStrap这个框架就必须要重载它的class类,也就是说class要一样 代码如下: 有疑问的可以在下面留言,欢迎大家一起交流 1.1动态模态框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width

  • bootstrap实现点击删除按钮弹出确认框的实例代码

    具体代码如下所示: <%@ page language="java" import="com.student.servlet.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@page import="java.util.*" import="com.student.vo.User"%

  • angularjs模态框的使用代码实例

    这篇文章主要介绍了angularjs模态框的使用代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 编写html页面 1.触发模态框的点击事件 <div> <button type="button" class="btn btn-primary" ng-click="openAddModal()" data-toggle="modal" data-tar

  • Bootstrap3 模态框使用实例

    不支持同时打开多个模态框 务必尽量将HTML代码放置在模态框的body位置以避免其他组件影响模态框 *autofocus 对于模态框无效, 需要自己调用 $('#myModal').on('shown.bs.modal', function () { $('#myInput').focus() })* 实例 静态 <div class="modal fade" tabindex="-1" role="dialog"> <div

随机推荐