Bootstrap 3 个嵌套模式 – 背景 z-index 和点击关闭模式
Bootstrap 3 nested modals – backdrop z-index and close modal on click
我正在开发一个 Web 应用程序 (Asp.Net MVC 5),用户必须在其中创建许多数据记录并映射到其他记录。用户必须能够创建到现有或新创建记录的映射。
一个典型的例子是创建一个地址:
- 用户打开站点创建地址
- 他输入了街道和街道号等普通字段
- 他可以从 table
select 现有城市(地址所在的城市)
- 如果所需的城市尚不存在,他可以创建一个新城市
- …对于城市,他可以select一个国家或创建(与地址和城市相同)
selection 是使用 bootstrap 模态实现的。
按下 select 按钮(例如 select 城市)会显示一个包含 table 的模式,显示 table 中所有 select 可用的记录。
table 的模态包含一个添加新按钮以添加新实体,这会打开另一个模态。
为了能够重用视图,我将代码拆分为部分视图,如下所示:
- _CreateAddress => 仅包含创建地址的表单
- _CreateAddressModal => 包含 _CreateAddress
的模式
_SelectAddressModal => 包含 table 以显示所有地址的模式。模式还包含 _CreateAddressModal,当用户单击添加新按钮时将显示该按钮
_CreateCity => 仅包含创建城市的表单
- _CreateCityModal => 包含 _CreateAddressModal
的模式
- _SelectCityModal => 包含 table 以显示所有城市的模式。模式还包含 _CreateCityModal,当用户单击添加新按钮时将显示它
…等等
我有两个问题:
- 单击背景不会关闭打开的模式
- 最顶部模态的背景具有比所有其他模态更低的 z-index,因此不会隐藏其他模态
我尝试在模态显示中设置背景的 z-index,以确保它们隐藏其他模态,但这没有用 => 背景显示在当前模态之上。
这是显示问题的 fiddle:jsFiffle
SO 不允许我 link 在不向问题添加代码的情况下使用 JSFiddle,所以这里是代码:
HTML:
<!-- Create Address -->
<div id="CreateAddress" class="modal fade fullScreen" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Create Address</h4>
</div>
<div class="modal-body">
<div class="alert alert-info">
<strong>Placeholder</strong> Here is the form to create an address
<button class="btn btn-default" id="selectCityButton">select city</button>
</div>
<button class="btn btn-primary">OK (not implemented)</button>
<button class="btn btn-default modalCloseButton"
data-modalid="CreateAddress">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Select City -->
<div id="SelectCity" class="modal fade fullScreen" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Select a City</h4>
</div>
<div class="modal-body">
<div class="alert alert-info">
<strong>Placeholder</strong> Here is a table to select an existing city
</div>
<button class="btn btn-success btn-block" id="createCityButton">Create new city</button>
<button class="btn btn-primary">OK (not implemented)</button>
<button class="btn btn-default modalCloseButton"
data-modalid="SelectCity">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Create City -->
<div id="CreateCity" class="modal fade fullScreen" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Create City</h4>
</div>
<div class="modal-body">
<div class="alert alert-info">
<strong>Placeholder</strong> Here is the form to create a city
<button class="btn btn-default" id="selectCountryButton">select country of city</button>
</div>
<button class="btn btn-primary">OK (not implemented)</button>
<button class="btn btn-default modalCloseButton"
data-modalid="CreateCity">Cancel</button>
<!-- Select Country -->
<div id="SelectCountry" class="modal fade fullScreen" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Select a Country</h4>
</div>
<div class="modal-body">
<div class="alert alert-info">
<strong>Placeholder</strong> Here is a table to select an existing country
</div>
<button class="btn btn-success btn-block" id="createCountryButton">Create new country</button>
<button class="btn btn-primary">OK (not implemented)</button>
<button class="btn btn-default modalCloseButton"
data-modalid="SelectCountry">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Select Country END -->
<!-- Create Country -->
<div id="CreateCountry" class="modal fade fullScreen" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Create Country</h4>
</div>
<div class="modal-body">
<div class="alert alert-info">
<strong>Placeholder</strong> Here is the form to create a country
</div>
<button class="btn btn-primary">OK (not implemented)</button>
<button class="btn btn-default modalCloseButton"
data-modalid="CreateCountry">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Create Country END -->
</div>
</div>
</div>
</div>
<button class="btn btn-primary btn-block" id="openModal">Open Modal</button>
JS:
var zIndex = 10000;
// Displys the given modal on top of everything else
// modal: The modal to display as jQuery object
// Does not work => remove thw first two lines to see the problem
function displayModalOnTop(modal) {
// remove me
modal.modal('show');
return;
// end remove
zIndex += 2;
modal.css('z-index', zIndex);
modal.modal('show');
setTimeout(function () {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
}
$(function(){
$('#openModal').on('click', function(){
displayModalOnTop($('#CreateAddress'));
});
// generic close modal handler
$('.modalCloseButton').on('click', function(){
var $this = $(this);
var modalId = $this.attr('data-modalid');
$('#' + modalId).modal('hide');
})
// Select city click
$('#selectCityButton').on('click', function(){
displayModalOnTop($('#SelectCity'));
});
// Create city click
$('#createCityButton').on('click', function(){
displayModalOnTop($('#CreateCity'));
});
// Select country click
$('#selectCountryButton').on('click', function(){
displayModalOnTop($('#SelectCountry'));
});
// Create country click
$('#createCountryButton').on('click', function(){
displayModalOnTop($('#CreateCountry'));
});
});
CSS:
.modal.fullScreen {
padding-left: 0 !important;
padding-right: 0 !important;
margin-top: 48px;
}
.modal.fullScreen .modal-content {
height: auto;
min-height: 100%;
border-radius: 0;
}
.modal.fullScreen .modal-body.noPadding {
padding: 0;
}
.modal.fullScreen .modal-dialog {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.modal.fullScreen .modal-header {
background-color: #3276b1;
color: #fff;
}
.modal.fullScreen .modal-header .close {
color: #FFF;
text-decoration: none;
cursor: pointer;
opacity: 0.4;
font-size: 30px;
}
.modal.fullScreen .modal-header .close:hover {
opacity: 1 !important;
}
与其自己编写这么多代码并自行维护所有内容,不如在下面的代码片段中简单地给出您可以做的事情。
function simpleSHow(title)
{
var msg=$('#simple-div');
BootstrapDialog.show({
title : title,
message: $('#simple-div'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function complexSHow(title)
{
var msg=$('#complex-div');
BootstrapDialog.show({
title : title,
message: $('#complex-div'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function showDiv1(div_id)
{
var msg=$('#lavel-2_div-1');
BootstrapDialog.show({
title : 'Level 2 Title',
message: $('#lavel-2_div-1'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function showDiv2(div_id)
{
var msg=$('#lavel-2_div-2');
BootstrapDialog.show({
title : 'Level 2 Title',
message: $('#lavel-2_div-2'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function showDiv3(div_id)
{
var msg=$('#lavel-2_div-3');
BootstrapDialog.show({
title : 'Level 2 Title',
message: $('#lavel-2_div-3'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function showDiv4(div_id)
{
var msg=$('#lavel-2_div-4');
BootstrapDialog.show({
title : 'Level 2 Title',
message: $('#lavel-2_div-4'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/css/bootstrap-dialog.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/js/bootstrap-dialog.min.js"></script>
<!-- This is a container Div which contains all the div to show when bootstrap dialog opens -->
<div style="display : none" id="hidden-div">
<div id="simple-div">
<h1>This is H1 Heading</h1>
This is most simple coding
<br>
<button type="button" class="btn btn-primary" onclick="showDiv1()">Lavel-2 div-1</button>
<button type="button" class="btn btn-primary" onclick="showDiv2()">Lavel-2 div-2</button>
</div>
<div id="lavel-2_div-1">
<h3>This is Level 2 Header</h3>
<span style="color : blue;">This is Level 2 Message 1</span>
</div>
<div id="lavel-2_div-2">
<h3>This is Level 2 Header</h3>
<span style="color : greenyellow;">This is Level 2 Message 2</span>
</div>
<div id="lavel-2_div-3">
<h3>This is Level 2 Header</h3>
<span style="color : pink;">This is Level 2 Message 3</span>
</div>
<div id="lavel-2_div-4">
<h3>This is Level 2 Header</h3>
<span style="color : green;">This is Level 2 Message 4</span>
</div>
<div class="container-fluid" id="complex-div">
<button type="button" class="btn btn-primary" onclick="showDiv3()">Lavel-2 div-3</button>
<button type="button" class="btn btn-primary" onclick="showDiv4()">Lavel-2 div-4</button>
<h2>Panels with Contextual Classes</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">Panel with panel-success class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Panel with panel-info class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">Panel with panel-warning class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">Panel with panel-danger class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>
</div>
       
<button type="button" class="btn btn-primary" onclick="simpleSHow('Hello 1234')">Simple Div Show</button>
       
<button type="button" class="btn btn-primary" onclick="complexSHow('Complex 1234')">Complex Div Show</button>
问题是模式覆盖了孔屏。由于模态框的边缘,背景是可见的,但不可点击,因为它完全被模态框覆盖了。
从模态中删除边距并将其添加到模态对话框中解决了问题。
我正在开发一个 Web 应用程序 (Asp.Net MVC 5),用户必须在其中创建许多数据记录并映射到其他记录。用户必须能够创建到现有或新创建记录的映射。
一个典型的例子是创建一个地址:
- 用户打开站点创建地址
- 他输入了街道和街道号等普通字段
- 他可以从 table select 现有城市(地址所在的城市)
- 如果所需的城市尚不存在,他可以创建一个新城市
- …对于城市,他可以select一个国家或创建(与地址和城市相同)
selection 是使用 bootstrap 模态实现的。 按下 select 按钮(例如 select 城市)会显示一个包含 table 的模式,显示 table 中所有 select 可用的记录。 table 的模态包含一个添加新按钮以添加新实体,这会打开另一个模态。
为了能够重用视图,我将代码拆分为部分视图,如下所示:
- _CreateAddress => 仅包含创建地址的表单
- _CreateAddressModal => 包含 _CreateAddress 的模式
_SelectAddressModal => 包含 table 以显示所有地址的模式。模式还包含 _CreateAddressModal,当用户单击添加新按钮时将显示该按钮
_CreateCity => 仅包含创建城市的表单
- _CreateCityModal => 包含 _CreateAddressModal 的模式
- _SelectCityModal => 包含 table 以显示所有城市的模式。模式还包含 _CreateCityModal,当用户单击添加新按钮时将显示它
…等等
我有两个问题:
- 单击背景不会关闭打开的模式
- 最顶部模态的背景具有比所有其他模态更低的 z-index,因此不会隐藏其他模态
我尝试在模态显示中设置背景的 z-index,以确保它们隐藏其他模态,但这没有用 => 背景显示在当前模态之上。
这是显示问题的 fiddle:jsFiffle
SO 不允许我 link 在不向问题添加代码的情况下使用 JSFiddle,所以这里是代码:
HTML:
<!-- Create Address -->
<div id="CreateAddress" class="modal fade fullScreen" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Create Address</h4>
</div>
<div class="modal-body">
<div class="alert alert-info">
<strong>Placeholder</strong> Here is the form to create an address
<button class="btn btn-default" id="selectCityButton">select city</button>
</div>
<button class="btn btn-primary">OK (not implemented)</button>
<button class="btn btn-default modalCloseButton"
data-modalid="CreateAddress">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Select City -->
<div id="SelectCity" class="modal fade fullScreen" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Select a City</h4>
</div>
<div class="modal-body">
<div class="alert alert-info">
<strong>Placeholder</strong> Here is a table to select an existing city
</div>
<button class="btn btn-success btn-block" id="createCityButton">Create new city</button>
<button class="btn btn-primary">OK (not implemented)</button>
<button class="btn btn-default modalCloseButton"
data-modalid="SelectCity">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Create City -->
<div id="CreateCity" class="modal fade fullScreen" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Create City</h4>
</div>
<div class="modal-body">
<div class="alert alert-info">
<strong>Placeholder</strong> Here is the form to create a city
<button class="btn btn-default" id="selectCountryButton">select country of city</button>
</div>
<button class="btn btn-primary">OK (not implemented)</button>
<button class="btn btn-default modalCloseButton"
data-modalid="CreateCity">Cancel</button>
<!-- Select Country -->
<div id="SelectCountry" class="modal fade fullScreen" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Select a Country</h4>
</div>
<div class="modal-body">
<div class="alert alert-info">
<strong>Placeholder</strong> Here is a table to select an existing country
</div>
<button class="btn btn-success btn-block" id="createCountryButton">Create new country</button>
<button class="btn btn-primary">OK (not implemented)</button>
<button class="btn btn-default modalCloseButton"
data-modalid="SelectCountry">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Select Country END -->
<!-- Create Country -->
<div id="CreateCountry" class="modal fade fullScreen" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Create Country</h4>
</div>
<div class="modal-body">
<div class="alert alert-info">
<strong>Placeholder</strong> Here is the form to create a country
</div>
<button class="btn btn-primary">OK (not implemented)</button>
<button class="btn btn-default modalCloseButton"
data-modalid="CreateCountry">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Create Country END -->
</div>
</div>
</div>
</div>
<button class="btn btn-primary btn-block" id="openModal">Open Modal</button>
JS:
var zIndex = 10000;
// Displys the given modal on top of everything else
// modal: The modal to display as jQuery object
// Does not work => remove thw first two lines to see the problem
function displayModalOnTop(modal) {
// remove me
modal.modal('show');
return;
// end remove
zIndex += 2;
modal.css('z-index', zIndex);
modal.modal('show');
setTimeout(function () {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
}
$(function(){
$('#openModal').on('click', function(){
displayModalOnTop($('#CreateAddress'));
});
// generic close modal handler
$('.modalCloseButton').on('click', function(){
var $this = $(this);
var modalId = $this.attr('data-modalid');
$('#' + modalId).modal('hide');
})
// Select city click
$('#selectCityButton').on('click', function(){
displayModalOnTop($('#SelectCity'));
});
// Create city click
$('#createCityButton').on('click', function(){
displayModalOnTop($('#CreateCity'));
});
// Select country click
$('#selectCountryButton').on('click', function(){
displayModalOnTop($('#SelectCountry'));
});
// Create country click
$('#createCountryButton').on('click', function(){
displayModalOnTop($('#CreateCountry'));
});
});
CSS:
.modal.fullScreen {
padding-left: 0 !important;
padding-right: 0 !important;
margin-top: 48px;
}
.modal.fullScreen .modal-content {
height: auto;
min-height: 100%;
border-radius: 0;
}
.modal.fullScreen .modal-body.noPadding {
padding: 0;
}
.modal.fullScreen .modal-dialog {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.modal.fullScreen .modal-header {
background-color: #3276b1;
color: #fff;
}
.modal.fullScreen .modal-header .close {
color: #FFF;
text-decoration: none;
cursor: pointer;
opacity: 0.4;
font-size: 30px;
}
.modal.fullScreen .modal-header .close:hover {
opacity: 1 !important;
}
与其自己编写这么多代码并自行维护所有内容,不如在下面的代码片段中简单地给出您可以做的事情。
function simpleSHow(title)
{
var msg=$('#simple-div');
BootstrapDialog.show({
title : title,
message: $('#simple-div'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function complexSHow(title)
{
var msg=$('#complex-div');
BootstrapDialog.show({
title : title,
message: $('#complex-div'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function showDiv1(div_id)
{
var msg=$('#lavel-2_div-1');
BootstrapDialog.show({
title : 'Level 2 Title',
message: $('#lavel-2_div-1'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function showDiv2(div_id)
{
var msg=$('#lavel-2_div-2');
BootstrapDialog.show({
title : 'Level 2 Title',
message: $('#lavel-2_div-2'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function showDiv3(div_id)
{
var msg=$('#lavel-2_div-3');
BootstrapDialog.show({
title : 'Level 2 Title',
message: $('#lavel-2_div-3'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function showDiv4(div_id)
{
var msg=$('#lavel-2_div-4');
BootstrapDialog.show({
title : 'Level 2 Title',
message: $('#lavel-2_div-4'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/css/bootstrap-dialog.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/js/bootstrap-dialog.min.js"></script>
<!-- This is a container Div which contains all the div to show when bootstrap dialog opens -->
<div style="display : none" id="hidden-div">
<div id="simple-div">
<h1>This is H1 Heading</h1>
This is most simple coding
<br>
<button type="button" class="btn btn-primary" onclick="showDiv1()">Lavel-2 div-1</button>
<button type="button" class="btn btn-primary" onclick="showDiv2()">Lavel-2 div-2</button>
</div>
<div id="lavel-2_div-1">
<h3>This is Level 2 Header</h3>
<span style="color : blue;">This is Level 2 Message 1</span>
</div>
<div id="lavel-2_div-2">
<h3>This is Level 2 Header</h3>
<span style="color : greenyellow;">This is Level 2 Message 2</span>
</div>
<div id="lavel-2_div-3">
<h3>This is Level 2 Header</h3>
<span style="color : pink;">This is Level 2 Message 3</span>
</div>
<div id="lavel-2_div-4">
<h3>This is Level 2 Header</h3>
<span style="color : green;">This is Level 2 Message 4</span>
</div>
<div class="container-fluid" id="complex-div">
<button type="button" class="btn btn-primary" onclick="showDiv3()">Lavel-2 div-3</button>
<button type="button" class="btn btn-primary" onclick="showDiv4()">Lavel-2 div-4</button>
<h2>Panels with Contextual Classes</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">Panel with panel-success class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Panel with panel-info class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">Panel with panel-warning class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">Panel with panel-danger class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>
</div>
       
<button type="button" class="btn btn-primary" onclick="simpleSHow('Hello 1234')">Simple Div Show</button>
       
<button type="button" class="btn btn-primary" onclick="complexSHow('Complex 1234')">Complex Div Show</button>
问题是模式覆盖了孔屏。由于模态框的边缘,背景是可见的,但不可点击,因为它完全被模态框覆盖了。 从模态中删除边距并将其添加到模态对话框中解决了问题。