如何使用jquery关闭模态窗口,通过模拟模态's关闭按钮
How to use jquery to close modal window, by emulating the modal's close button
我的网站有一个模式窗口,当用户单击链接时会弹出。模态完全是用CSS3制作的,但我正在尝试实现一个函数,这样当用户按下escape键时,它就会关闭模态窗口。
我已经能够使用jquery成功地做到这一点,只是如果我按下escape并关闭模态,那么我将无法重新打开模态,除非我刷新页面。模态窗口内部有一个"关闭"链接,不会产生此问题。
如何使用转义键关闭模态窗口,使其产生与在模态中单击"关闭"相同的效果?
这是模态的代码:
//打开模式
<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更改为类似关闭按钮的行为?
感谢
您可以通过选择关闭按钮元素手动触发点击事件
$('#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
相关文章:
- 我想使用模态通过php文件发送邮件,并且我希望在提交关闭后关闭pop
- 打开一个模态并将其链接到AngularJS中的指令
- SemanticUI模态not onDeny/onApprove事件未激发
- 有没有比在app.js上绑定模块名称更好的方法来动态加载视图模型和视图以显示模态
- 如何通过所选索引(AngularJS)在模态弹出窗口中显示数据
- 包含数据库中相关信息的开放模态
- bootstrap消除模态并显示另一个模态
- 模态提示-如何重写此代码
- 模态框无法正常工作
- 将数据传递给由服务创建的Ionic模态
- iframe模态无法关闭
- 点击AngularJS模态窗口捕捉背景事件
- jqueryajax调用是复制url,当在模态视图之后在外部js文件中进行调用时
- 使用模态对话框(JQuery)编辑函数
- 如何在模态实例中使用filter
- 页面上有多个模态框
- 如果满足某些条件,如何在不调用模态的情况下首先调用类
- 在将缩略图链接到模态时遇到问题
- 如何使用jquery关闭模态窗口,通过模拟模态's关闭按钮
- 如何在 dojo 中模拟无模态窗口对话框,以便我们可以打开多个窗口窗格