在我的网站上，我有一个内置于 Bootstrap 4 的灯箱，带有一个模式，可以打开图像以查看更大的版本。 一切正常，但关闭模态的唯一方法是单击屏幕右上角的 X。 我知道默认情况下，Modals 会在单击背景时关闭，我希望帮助它按预期工作。
非常感谢
@charset "UTF-8";
/* CSS Document */
body {background-color: rgba(0,0,0,0.40);
display: flex;
min-height: 100vh;
flex-direction: column;
}
#wrap {
flex: 1;
padding: 0 0 0 0;
}
h1 {font-family: omnes-pro,sans-serif;
font-weight: 400;
font-style: normal;}
h2 {font-family: omnes-pro,sans-serif;
font-weight: 400;
font-style: normal;}
ul {list-style: none;}
li {
color: #FFFFFF;
text-decoration: none;
}
.portfolio-title {
width: 100%;
border-bottom: rgba(255,255,255,1.00) thin solid;
}
.nav-link {
font-size: 130%
}
.image {width: 100%;}
.article {
display: flex;
flex-wrap: wrap;}
.frame {border: rgba(255,253,253,1.00) thin solid;}
#gallery {max-width: 95%;}
/* image gallery start */
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
@media screen and (max-width: 576px) {
.modal-content {
padding: 20;
width: 80%;
}
#mobilefirst {
border: rgba(255,253,253,1.00) thin solid;
margin-bottom: 10px;}
#gallery {border: none;}
}
/* image gallery stop */
/* modal start */
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Create four equal columns that floats next to eachother */
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 200;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.85);
}
/* Modal Content */
.modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fefefe;
margin: auto;
padding: 10;
width: 100%;
max-width: 663px;
max-height: 999px;
border: rgba(255,255,255,1.00) thin solid;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 10px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
/* Hide the slides by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(255,255,255,1.00);
}
img.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.modal.fade .modal-dialog {
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
transform: scale(0.1);
top: 300px;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
/* modal stop */<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lightbox</title>
<!-- Bootstrap -->
<link href="https://www.aytonwest.com/2021site/css/bootstrap-4.4.1.css" rel="stylesheet">
<link href="https://www.aytonwest.com/2021site/css/stylesheetlightbox.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.typekit.net/edx4faj.css">
<div class="container-fluid" id="wrap">
<div class="container-fluid content-wrap">
<div class="container mt-3 p-2 shadow-lg d-block d-sm-none"> <img src="https://www.aytonwest.com/2021site/images/logos/aytonwest-people_logo2018-white.png" class="img-fluid" alt="Ayton West Logo"></div>
<div class="container">
<h1 class="p-3 text-center">Photographer of gardens and botanical studies</h1>
</div>
<!-- image gallery start -->
<div class="container-fluid pt-3 pl-4 pr-4 shadow-lg mt-4 frame" id="gallery">
<div class="row">
<div class="column">
<img src="https://www.aytonwest.com/2021site/images/portfolio-botanical/ayton-west- botanical-garden-01.jpg" alt="" onclick="openModal();currentSlide(1)" class="hover-shadow" id="mobilefirst">
</div>
<div class="column">
<img src="https://www.aytonwest.com/2021site/images/portfolio-botanical/ayton-west- botanical-garden-07.jpg" alt="" onclick="openModal();currentSlide(2)" class="hover-shadow d-none d-sm-block">
</div>
<div class="column">
<img src="https://www.aytonwest.com/2021site/images/portfolio-botanical/ayton-west-botanical-garden-13.jpg" alt="" onclick="openModal();currentSlide(3)" class="hover-shadow d-none d-sm-block">
</div>
<div class="column">
<img src="https://www.aytonwest.com/2021site/images/portfolio-botanical/ayton-west-botanical-garden-19.jpg" alt="" onclick="openModal();currentSlide(4)" class="hover-shadow d-none d-sm-block">
</div>
</div>
</div>
</div>
<!-- image gallery stop -->
<!-- The Modal/Lightbox -->
<div id="myModal" <div class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<img src="https://www.aytonwest.com/2021site/images/portfolio-botanical/ayton-west- botanical-garden-01.jpg" style="width:100%" alt="">
</div>
<div class="mySlides">
<img src="https://www.aytonwest.com/2021site/images/portfolio-botanical/ayton-west- botanical-garden-07.jpg" style="width:100%" alt="">
</div>
<div class="mySlides">
<img src="https://www.aytonwest.com/2021site/images/portfolio-botanical/ayton-west-botanical-garden-13.jpg" style="width:100%" alt="">
</div>
<div class="mySlides">
<img src="https://www.aytonwest.com/2021site/images/portfolio-botanical/ayton-west-botanical-garden-19.jpg" style="width:100%" alt="">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://www.aytonwest.com/2021site/js/jquery-3.4.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://www.aytonwest.com/2021site/js/popper.min.js"></script>
<script src="https://www.aytonwest.com/2021site/js/bootstrap-4.4.1.js"></script>
<script>
// Open the Modal
function openModal() {
document.getElementById("myModal").style.display = "block";
}
// Close the Modal
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>答案 0 :(得分：0)
使用 jQuery 中的按键功能，您可以对键盘上的任何键进行寻址。在下面的示例中，当您按下 escape 时，网站会提醒您。您可以添加自己的函数，而不是警报。
按“运行代码段”并点击代码段以聚焦页面。然后你必须按“Escape”。
$(document).on('keydown', function(event) {
if (event.key == "Escape") {
alert('You pressed Escape!');
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Click me and press Escape!</h1>如果你想关闭模态，你必须这样做：
$(document).on('keydown', function(event) {
if (event.key == "Escape") {
closeModal();
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Add this jQuery Link and the JS-Code and the Modal will close when you press escape!</h1>