单击背景或按 esc 时，模态不会关闭

Question

在我的网站上，我有一个内置于 Bootstrap 4 的 Lightbox，带有一个打开图像以查看更大版本的模式。 这一切都很好，但关闭模式的唯一方法是单击右上角屏幕上的 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()">&times.</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)">&#10094.</a> <a class="next" onclick="plusSlides(1)">&#10095.</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>

Answer 1

使用 jQuery 中的按键 function，您可以寻址键盘上的任何键。 在下面的示例中，当您按下escape时，网站会提醒您。 您可以添加自己的 function，而不是警报。

按“运行代码片段”并单击片段以将页面聚焦在它上面。 然后你必须按“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>