如何打开一个模式与Javascript当一个图像框被点击，它关闭时点击框外?

Question

我用Javascript创建了一个情态。现在，当我点击图像模态打开，当我点击交叉按钮，它关闭。我想要的是，而不是图片，当用户点击图像框，而不是具体的图像，模态应该打开，当用户点击模态框外的任何地方，它应该关闭，不仅与交叉按钮。

Html:

<section id="about-intro">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-12 col-lg-11 about-start">


<div class="about-content">
<div class="about-box">
<div class="upp-title">
<div class="upp-headshot">
<picture> <img src="image" 
href="#myModal1" class="rounded-circle" alt="Responsive image"/> </picture>
</div>
<div class="upp-info">
<h3><span class="about-name">abc</span> 
</h3>
<p><span class="about-des">xyz</span></p>
</div>
</div>
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>

</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12" style="text-align: center;">
<img src="" class="img- 
fluid" alt="Responsive image">
</div>
<div class="col-md-12" style="text-align: center;">
<h1 class="modalh1">abc</h1>
<h3 class="modalh3">xyz</h3>
<p class="modalp">qwertyuicffvgbhnmghj</p>
</div>
</div>
</div>
<div class="modal-footer">

</div>
</div>
</div>                                
</div>
</div>
</div>
</div>
</div>
</section>

脚本:

<script>
// Get the button that opens the modal
var img = document.querySelectorAll("img.rounded-circle");
// All page modals
var modals = document.querySelectorAll('.modal');
// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");
// When the user clicks the button, open the modal
for (var i = 0; i < img.length; i++) {
img[i].onclick = function(e) {
e.preventDefault();
modal = document.querySelector(e.target.getAttribute("href"));
modal.style.display = "contents";
}
}
// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";    
}
}
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target.classList.contains('modal')) {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";    
}
}
}
</script>

Answer 1

希望有帮助。

我总是使用柔性显示，所以我可以点击外部内容。
我试图插入到你的代码

更改.modal的样式

<div
id="myModal1"
class="modal"
style="
display: none;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
position: fixed;
top: 0px;
left: 0px;
">

然后在js中，而不是window.onclick

for (var i = 0; i < modals.length; i++) {
modals[i].onclick = function (event) {
if (!event.target.closest('.modal-content')) {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined')
modals[index].style.display = 'none';
}
}
};
}

您可以将选择器更改为.upp-title或.upp-headshot以获得更大的可点击区域。

Answer 2

我希望你能在你的代码中使用这个方法!查看

document.addEventListener(
"click",
function(event) {
// If user either clicks X button OR clicks outside the modal window, then close modal by calling closeModal()
if (
event.target.matches(".button-close-modal") ||
!event.target.closest(".modal")
) {
closeModal()
}
},
false
)
function closeModal() {
document.querySelector(".modal").style.display = "none"
}

.modal {
padding: 2rem;
border: 1px solid #eee;
width: max-content;
position: fixed;
right: 0;
bottom: 0;
max-width: 100%;
}
.button-close-modal {
display: block;
font-size: 2rem;
font-weight: bold;
margin-left: auto;
}

<main>
<div class="modal">
<button class="button-close-modal">X</button>
<h2>Modal close without Using button(X)</h2>
<p>Sed ut perspiciatis unde voluptatem accusantium doloremque laudantium,</p>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</div>
</main>