I have a contact form that opens as a black background div and inside of it, an other div with the form itself.
I made the contact form an X button to exit, and now I want it to exit when ever clicking that black background.
How do I do this?
This is my HTML:
<div class="contact_form">
<div class="form_container">
<div class="the-x-container">
<span class="the-x">X</span>
</div>
<h1>Contact Us</h1>
<h2><span class="text-orange">Improve</span> Business Performance</h2>
<div class="line"></div>
<div class="form_content">
<div> <span> Name: </span> <input type="text" id="fullname"> </div>
<div> <span> E-mail: </span> <input type="text" id="email"> </div>
<div> <span> Message: </span> <input type="text" id="text"> </div>
<div id="sendBtn"> Submit </div>
</div>
<div id="aboutSuccess">
Thank you for reaching out! <br>Our team will be in contact with you shortly.
<!--iframe id="pixel-thing" src="http://www.example.com/thePixel.html" width="1" height="1" style="display: none;" border="0"></iframe-->
</div>
<div id="aboutUnsuccess">
Invalid Email address. <br><span id="tryAgain">Click here</span> to try again.
</div>
</div>
</div>
This is my CSS:
/********************************************* Contact Form ******************************************************/
.contact{
cursor: pointer;
color: #fff;
}
html.stop-scrolling {
/*width: 100%;
position: fixed;*/
position: fixed;
width: 100%;
top:0;
left: 0;
height: 100%;
overflow-y: scroll !important;
z-index: 10;
}
.contact_form{
display : none;
width : 100%;
height : 100%;
background : rgba(0, 0, 0, 0.7);;
position : absolute;
top : 0;
left : 0;
z-index : 800;
}
.contact_form .form_container{
background-image: url('images/popup.png');
background-size: 100%;
background-repeat: no-repeat;
display: block;
width: 45.8em;
height: 50em;
z-index: 850;
position: fixed;
top: 22%;
left: 34%;
padding-left: 10px;
margin: auto;
}
.contact_form .the-x-container{
width: 32em;
padding-top: 5.4em;
}
.contact_form .the-x{
color: #f46406;
font-weight: bold;
float: right;
font-size: 1.3em;
cursor: pointer;
}
.contact_form h1{
font-family: 'FSR';
text-align: center;
color: #fff;
font-size: 4em;
padding-top: 1.7em;
width: 8.5em;
height: 0.9em;
}
.contact_form h2{
font-family: 'Bauhaus93R';
text-align: center;
color: #fff;
font-size: 1.7em;
width: 21.1em;
}
.contact_form .line{
height: 1em;
width: 30em;
margin: 0 0 0 3.9em;
background-image: url('images/popup_stroke.png');
background-size: 100%;
background-repeat: no-repeat;
}
.contact_form .form_content {
width: 34em;
margin: 1em auto;
}
.contact_form .form_content div{
font-size: 1.5em;
}
.contact_form .form_content span{
color: #f46406;
}
.contact_form input{
border-width: 0px 0px 1px 0px;
border-style: solid;
border-color: #fff;
background-color: transparent;
outline: 0;
}
.contact_form #fullname {
font-size: 1.1em;
}
.contact_form #email {
font-size: 1.1em;
}
.contact_form #text {
font-size: 1.1em;
}
.contact_form #sendBtn{
cursor: pointer;
color: #f46406;
text-decoration: underline;
text-align: center;
width: 15em;
margin-top: 1em;
}
.contact_form #aboutSuccess{
display: none;
}
.contact_form #aboutUnsuccess{
display: none;
}
and this is my current JS:
$('.the-x').click(function(){
$('.contact_form').fadeOut("slow");
$('html').removeClass("stop-scrolling")
})
I tried using:
$('.contact_form').click(function(){
$('.contact_form').fadeOut("slow");
$('html').removeClass("stop-scrolling")
})
But whenever clicking on a form field = the form hides.
$('.contact_form').click(function(e){
//check whether the target of the click has form_container as a parent
if (!$(e.target).closest('.form_container').length) {
$('.contact_form').fadeOut("slow");
$('html').removeClass("stop-scrolling")
}
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.