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

Question

On my site I have a Lightbox built in Bootstrap 4 with a modal that opens the image to see a larger version. It all works well but the only way to close the Modal is by clicking the X at the top righthand screen. I understood the default was that Modals would close when clicking the background and I would like help in getting this to work as it should please.

Thank you very much

 @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

With the keypress function in jQuery, you can address any key on the keyboard. In the example below, the website will alert you when you press escape . Instead of the alert you can add your own function.

Press "Run code snippet" and click in the snippet to focus the page on it. Then you have to press "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>

If you want the modal to close, you have to do it this way:

 $(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>