Jquery 使用绝对位置时的问题(';单击';)
我正在尝试创建一个带有黑色背景的弹出元素的网站,然后,当你点击背景时,它就会消失。目前,我基本上让它工作,但当在弹出窗口中单击时,它仍然会消失,而不仅仅是背景 我该如何解决这个问题 我试图修复的HTML部分:Jquery 使用绝对位置时的问题(';单击';),jquery,html,css,Jquery,Html,Css,我正在尝试创建一个带有黑色背景的弹出元素的网站,然后,当你点击背景时,它就会消失。目前,我基本上让它工作,但当在弹出窗口中单击时,它仍然会消失,而不仅仅是背景 我该如何解决这个问题 我试图修复的HTML部分: <div class="popup-container" data-reference="sign-in"> <div class="sign-in"> <h1>Sign In</h1> <div
<div class="popup-container" data-reference="sign-in">
<div class="sign-in">
<h1>Sign In</h1>
<div class="popup-content-container">
<form class="sign-in" method="post" action="./action.php">
<input type="text" name="username" placeholder="Username" /><br />
<input type="password" name="password" placeholder="Password" /><br />
<input type="submit" value="Sign In" /><br />
</form>
<div class="footer">
<a href="#">Forgotten Username?</a> <a href="#">Forgotten Username?</a><br />
<a href="#">Don't Have an Account?</a>
</div>
</div>
</div>
</div>
$('div.popup-container').on('click', function() {
$(this).fadeOut();
});
div.popup-container {
position:absolute;
margin:auto auto;
top:0;bottom:0;
left:0;right:0;
background:rgba(0,0,0,0.5);
z-index:101;
}
div.popup-container:hover {
cursor:pointer;
}
/*---- Sign In ----*/
div.sign-in {
width:400px;
height:300px;
position:absolute;
margin:auto auto;
top:0;bottom:0;
left:0;right:0;
background:#FFF;
border:solid 1px #CCC;
border-radius:5px;
z-index:111;
}
div.sign-in:hover {
cursor:default;
}
div.sign-in > h1 {
display:block;
padding:15px 0;
border-bottom:solid 1px #CCC;
text-align:center;
}
div.sign-in > div.popup-content-container {
height:calc(100% - 98px);
position:relative;
padding:15px;
}
div.sign-in > div.popup-content-container > form.sign-in {
height:calc(102px + 34px);
position:absolute;
margin:auto auto;
top:0;bottom:0;
left:0;right:0;
text-align:center;
}
div.sign-in > div.popup-content-container > form.sign-in > input[type=text],
div.sign-in > div.popup-content-container > form.sign-in > input[type=password],
div.sign-in > div.popup-content-container > form.sign-in > input[type=submit] {
width:75%;
margin-bottom:5px;
padding:5px;
background:#FFF;
border:solid 1px #CCC;
border-radius:5px;
outline:none;
}
div.sign-in > div.popup-content-container > form.sign-in > input[type=submit]:hover {
background:rgba(0,0,0,0.05);
}
div.sign-in > div.popup-content-container > div.footer {
position:absolute;
margin:auto auto;
top:auto;bottom:15px;
left:0;right:0;
color:rgba(0,0,0,0.5);
text-align:center;
}
当前CSS,用于HTML部分:
<div class="popup-container" data-reference="sign-in">
<div class="sign-in">
<h1>Sign In</h1>
<div class="popup-content-container">
<form class="sign-in" method="post" action="./action.php">
<input type="text" name="username" placeholder="Username" /><br />
<input type="password" name="password" placeholder="Password" /><br />
<input type="submit" value="Sign In" /><br />
</form>
<div class="footer">
<a href="#">Forgotten Username?</a> <a href="#">Forgotten Username?</a><br />
<a href="#">Don't Have an Account?</a>
</div>
</div>
</div>
</div>
$('div.popup-container').on('click', function() {
$(this).fadeOut();
});
div.popup-container {
position:absolute;
margin:auto auto;
top:0;bottom:0;
left:0;right:0;
background:rgba(0,0,0,0.5);
z-index:101;
}
div.popup-container:hover {
cursor:pointer;
}
/*---- Sign In ----*/
div.sign-in {
width:400px;
height:300px;
position:absolute;
margin:auto auto;
top:0;bottom:0;
left:0;right:0;
background:#FFF;
border:solid 1px #CCC;
border-radius:5px;
z-index:111;
}
div.sign-in:hover {
cursor:default;
}
div.sign-in > h1 {
display:block;
padding:15px 0;
border-bottom:solid 1px #CCC;
text-align:center;
}
div.sign-in > div.popup-content-container {
height:calc(100% - 98px);
position:relative;
padding:15px;
}
div.sign-in > div.popup-content-container > form.sign-in {
height:calc(102px + 34px);
position:absolute;
margin:auto auto;
top:0;bottom:0;
left:0;right:0;
text-align:center;
}
div.sign-in > div.popup-content-container > form.sign-in > input[type=text],
div.sign-in > div.popup-content-container > form.sign-in > input[type=password],
div.sign-in > div.popup-content-container > form.sign-in > input[type=submit] {
width:75%;
margin-bottom:5px;
padding:5px;
background:#FFF;
border:solid 1px #CCC;
border-radius:5px;
outline:none;
}
div.sign-in > div.popup-content-container > form.sign-in > input[type=submit]:hover {
background:rgba(0,0,0,0.05);
}
div.sign-in > div.popup-content-container > div.footer {
position:absolute;
margin:auto auto;
top:auto;bottom:15px;
left:0;right:0;
color:rgba(0,0,0,0.5);
text-align:center;
}
tl;dr:为什么我的.on('click')
会在弹出窗口内外触发?解决方案可能是:
$('div.popup-container').on('click', function() {
$(this).fadeOut();
});
$('div.sign-in').on('click', function(e) {
e.stopPropagation();
});
这将停止子元素自动触发附加到父(弹出容器)元素的任何单击事件
更多关于事件.stopPropagation()
的信息
在jquery文件中尝试以下代码:
$(document).on('click','div.popup-container' ,function() {
$(this).fadeOut();
});
谢谢朋友!这很好。