引导模式，内容作为图像链接和重叠关闭按钮 - 如何专注于关闭按钮

Question

>我有一个模态，内容作为图像链接和重叠的关闭按钮。但是，关闭按钮未获得焦点。而不是关闭按钮，链接是聚焦的，因此被点击。

这是我迄今为止的工作。我想要的只是关闭按钮聚焦，同时保持完整的图像链接完好无损。请帮助实现它。

$("#adModalLarge").modal("show");

.modal-full .close {
position: absolute;
top: 5px;
right: 25px;
font-size: 60px;
font-weight: bolder;
transition: 0.3s;
z-index: 9!important;
opacity: 0.6;
}
.modal-lg .close {
position: absolute;
top: 5px;
right: 25px;
font-size: 40px;
font-weight: bolder;
transition: 0.3s;
z-index: 9!important;
opacity: 0.6;
}
.close:hover,
.close:focus {
opacity: 0.9!important;
text-decoration: none;
cursor: pointer;
}
.viewindex {
z-index: 999999999!important
}
.modal-full {
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
padding: 0 !important;
margin: 0;
}
.modal-full .modal-content {
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div aria-hidden="true" aria-labelledby="adModalLargeLabel" class="modal fade pl-0 viewindex" id="adModalLarge" role="dialog" tabindex="-1">
<div class="modal-dialog modal-full" role="document">
<span class="close" data-dismiss="modal">×</span>
<a href="https://www.example2.com" target="_blank"><img src="https://www.insaid.co/wp-content/uploads/2019/10/2-1.png" alt="" class="modal-content"></a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Answer 1

您需要从.modal-dialog中删除pointer-events:none;

$("#adModalLarge").modal("show");

.modal-dialog {
pointer-events: auto !important;
}
.modal-full .close {
position: absolute;
top: 5px;
right: 25px;
font-size: 60px;
font-weight: bolder;
transition: 0.3s;
z-index: 9!important;
opacity: 0.6;
}
.modal-lg .close {
position: absolute;
top: 5px;
right: 25px;
font-size: 40px;
font-weight: bolder;
transition: 0.3s;
z-index: 9!important;
opacity: 0.6;
}
.close:hover,
.close:focus {
opacity: 0.9!important;
text-decoration: none;
cursor: pointer;
}
.viewindex {
z-index: 99999 !important
}
.modal-full {
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
padding: 0 !important;
margin: 0;
}
.modal-full .modal-content {
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div aria-hidden="true" aria-labelledby="adModalLargeLabel" class="modal fade pl-0 viewindex" id="adModalLarge" role="dialog" tabindex="-1">
<div class="modal-dialog modal-full" role="document">
<div class="close" data-dismiss="modal">×</div>
<a href="https://www.example2.com" target="_blank"><img src="https://www.insaid.co/wp-content/uploads/2019/10/2-1.png" alt="" class="modal-content"></a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>