CSS / HTML Modal-使用Esc键/单击外面关闭 [英] CSS/HTML Modal- Using the Escape key/Click outside to close
本文介绍了CSS / HTML Modal-使用Esc键/单击外面关闭的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下模态工作,
http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/
在我的网站上。这正是我想要的易用性和功能。我唯一的问题是如何使模态关闭时,用户A)点击模态窗口外,或B)点击退出键。
on my site. It's exactly what I want in terms of ease of use, and function. The only issue I have is how to make the modal close when the user either A) Clicks outside the modal window, or B) Hits the Escape key.
任何建议?
<a href="#openModal">Open Modal</a>
<div id="openModal" class="modalDialog">
<div> <a href="#close" title="Close" class="close">X</a>
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
推荐答案
小javascript。检查代码有一些注释。
For this you will need a little javascript. Check the code with some comments.
function modalClose() {
if (location.hash == '#openModal') {
location.hash = '';
}
}
// Handle ESC key (key code 27)
document.addEventListener('keyup', function(e) {
if (e.keyCode == 27) {
modalClose();
}
});
var modal = document.querySelector('#openModal');
// Handle click on the modal container
modal.addEventListener('click', modalClose, false);
// Prevent event bubbling if click occurred within modal content body
modal.children[0].addEventListener('click', function(e) {
e.stopPropagation();
}, false);
演示: http://jsfiddle.net/GG9Sa/264/
请注意,关闭模态在技术上只能使用CSS / HTML,但是对于处理Escape键按下您将需要Javascript。
Demo: http://jsfiddle.net/GG9Sa/264/
Note, that closing modal is technically possible with CSS/HTML only, however for handling Escape key press you will need Javascript.
这篇关于CSS / HTML Modal-使用Esc键/单击外面关闭的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文