Trying to target elements in my practice layout but struggling to figure out the right approach:
BASIC HTML
<button id="opencontact" type="button" name="button">
<i class="far fa-envelope fa-2x"></i>
</button>
<section id="contact-section">
<div class="contact-container">
<div class="contact-content">
<h2>Contact Us</h2>
<label for="">Email</label>
<input type="text" name="" value="">
<label for="">Name</label>
<input type="text" name="" value="">
<label for="">Message</label>
<textarea name="name" rows="8" cols="80"></textarea>
<button type="button" name="button">Submit</button>
</div>
</div>
</section>
CSS STYLES:
body {
padding: 0;
margin: 0;
font-family: Helvetica;
box-sizing: border-box;
}
#opencontact {
bottom: 10px;
right: 10px;
position: fixed;
}
#contact-section {
height: 60%;
width: 40%;
position: absolute;
top: 20%;
left: 30%;
display: none;
align-items: center;
justify-content: center;
background-color: red;
}
#contact-section.show {
display: flex;
}
.contact-container {
height: 90%;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.contact-content {
height: 90%;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
JQuery SCRIPT to open the contact-section when #opencontact is clicked:
<script type="text/javascript">
$("#opencontact").click(function() {
$("#contact-section").toggleClass("show");
});
</script>
Need help with a script to close the modal when clicking outside the #contact section. Existing solutions tried didn't work, so looking for suggestions.