如何使用 jquery 来关闭模态 window，通过模拟模态的关闭按钮

Question

我的网站有一个模式 window，当用户点击 link 时弹出。模式纯粹是用CSS3制作的，但我正在尝试实现一个功能，以便当用户按下转义键时，它将关闭模式window。

我已经能够使用 jquery 成功地做到这一点，除了如果我按下转义键并关闭模式，那么我无法重新除非我刷新页面，否则打开模态。模态 window 里面有一个 "Close" link 不会产生这个问题。

如何使用转义键关闭模式 window 以使其产生与在模式中单击 "close" 相同的效果？

模态代码如下：

//打开模式

<label for="lightbox-demo">Launch Lightbox</label>

//模态代码

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

这是错误的 jquery:

<script type="text/javascript">
$(document).keyup(function(e) {
    if (e.keyCode == 27) {
        $(".lightbox").hide();
    }
    if (e.keyCode == 27) {
        $(".lightbox").hide();
    }
});
</script>

如何将此 JS 更改为像关闭按钮一样？

谢谢

Answer 1

您可以通过选择关闭按钮元素手动触发点击事件

$('#lightbox-demo + .content footer label[for="lightbox-demo"]').click()

演示：Fiddle

如果你能给关闭按钮一个ID就容易多了

<label id="lightbox-demo-close" class="button" for="lightbox-demo">Close</label>

然后

$('#lightbox-demo-close').click()

演示：Fiddle

如何使用 jquery 来关闭模态 window，通过模拟模态的关闭按钮

How to use jquery to close modal window, by emulating the modal's close button

html

javascript

jquery

modal-dialog