使用jQuery和Bootstrap实现多层、自适应模态窗口

摘要：本篇实践一个多层模态窗口，而且是自适应的。点击页面上的一个按钮，弹出第一层自适应模态窗口。在第一层模态窗口内包含一个按钮，点击该按钮弹出第二...

本篇实践一个多层模态窗口，而且是自适应的。

点击页面上的一个按钮，弹出第一层自适应模态窗口。

在第一层模态窗口内包含一个按钮，点击该按钮弹出第二层模态窗口，弹出的第二层模态窗口会挡住第一层模态窗口，即第二层模态窗口打开的时候，无法关闭第一层模态窗口。

具体页面实现部分如下：

复制代码代码如下:

<head>

.modal-open,

.modal-open .navbar-fixed-top,

.modal-open .navbar-fixed-bottom {

margin-right: 0;

}

.modal {

bottom: auto;

padding: 0;

background-color: #ffffff;

border: 1px solid #999999;

border: 1px solid rgba(0, 0, 0, 0.2);

border-radius: 6px;

-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);

box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);

background-clip: padding-box;

overflow-y: auto;

}

.modal.container {

max-width: none;

}

#firstmodal {

width: 98%;

height: 98%;

}

#secondmodal {

width: 99%;

height: 99%;

}

</style>

$(function() {

$('#m1').on("click", function() {

$('#firstmodal').modal();

});

$('#m2').on("click", function () {

$('#secondmodal').modal();

});

</script>

</head>

<body>

<div>

<button id="m1">打开第一层模态窗口</button>

</div>

<div>

<h4>第一层模态窗口</h4>

</div>

<div>

<p>

<button id="m2">打开第二层模态窗口</button>

第一层主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

第一层主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

第一层主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

</p>

</div>

<div>

</div>

<div>

<h4>第二层模态窗口</h4>

</div>

<div>

<p>

第二层主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

</p>

</div>

<div>

</div>

</body>

以上就是jQuery和Bootstrap实现多层、自适应模态窗口的全部内容了，非常的不错，而且很实用，直接就可以使用到项目中去。