My website has a modal window that pops up when a user clicks a link. The modal is made purely with CSS3, but I'm trying to implement a function so that when a user presses the escape key, it will close the modal window.
I've successfully been able to do this using jquery, except that if I press escape and it closes the modal, I am then unable to re-open the modal unless I refresh the page. The modal window has a "Close" link inside of it that does not produce this problem.
How do I close the modal window using the escape key so that it produces the same effect as if I clicked "close" within the modal?
Here is the code for the modal:
//Opens the modal
<label for="lightbox-demo">Launch Lightbox</label>
//Modal code
<aside class="lightbox">
<input type="checkbox" class="state" id="lightbox-demo" />
<article class="content">
<main class="main">
<form method="post" action="submit.php" id="contactform" class="signin">
<h1>Drop us a line</h1>
<h2>We'll reply within 24 hours</h2>
<input name="name" id="name" type="text" class="feedback-input" placeholder="Name" />
<input name="email" id="email" type="email" class="feedback-input" placeholder="Email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)" required title="Whoops! Invalid email"/>
<div class="antispam">
<br /><input name="url" type="hidden" /></div>
<textarea name="message" id="message" class="feedback-input" placeholder="Write away!" required minlength="15" required title="Must be at least 15 characters"></textarea>
<button id="flybutton">
<p>Ready, Aim... </p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z
M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path>
</svg>
</button>
</form>
</main>
<footer class="footer">
<button class="button" type="button">Do something</button>
<label class="button" for="lightbox-demo">Close</label>
</footer>
</article>
<label class="backdrop" for="lightbox-demo"></label>
</aside>
and here's the faulty jquery:
<script type="text/javascript">
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$(".lightbox").hide();
}
if (e.keyCode == 27) {
$(".lightbox").hide();
}
});
</script>
How do I change this JS to act like the close button?
Thank you
You can trigger the click event manually, by selecting the close button element
$('#lightbox-demo + .content footer label[for="lightbox-demo"]').click()
Demo: Fiddle
It is much easier if you can give an ID to the close button
<label id="lightbox-demo-close" class="button" for="lightbox-demo">Close</label>
then
$('#lightbox-demo-close').click()
Demo: Fiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.