I am currently working on a website project where I have implemented a popup element with a dark backdrop. However, the issue I am facing is that when clicking within the popup itself, it also triggers the fade-out effect instead of just when clicking on the backdrop.
Any suggestions on how to resolve this? Check out the JsFiddle for reference.
This is the problematic HTML section:
<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>
Current jQuery code snippet:
$('div.popup-container').on('click', function() {
$(this).fadeOut();
});
Current CSS related to the HTML section:
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;
}
and so forth...
In summary: Why does my use of .on('click') trigger both inside and outside the popup?