Your problem is this chunk of code here:
window.onclick = function(event) {
if (event.target == modal)
modal.style.display = "none";
modal2.style.display = "none";
}
I’m not sure what you are intending to do with that, but remember, if no curly braces are provided with your if statement, then only the line directly after your if condition will execute. Your second line will always execute. So you are effectively hiding modal2 on every single click event (since your listening to window.onclick). I don’t think you want that.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
overflow: scroll;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid;
width: 95%;
position: relative;
}
.modal2 {
display: none;
position: fixed;
z-index: 1;
overflow: scroll;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.modal2-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid;
width: 95%;
position: relative;
}
</style>
<button id="myButton">Contact</button>
<div id="myModal" class="modal">
<div action="" class="modal-content">
<span id="close">×</span>
<p class="formHeader">Let's Work Together...</p>
<p id="formSubheader">Name</p>
<input type="type" name="firstName" placeholder="First" class="inputBox1">
<input type="type" name="lastName" placeholder="Last" class="inputBox1">
<p id="formSubheader">Email</p>
<input type="email" name="email" placeholder="[email protected]" class="inputBox2">
<p id="formSubheader">Phone</p>
<input type="tel" name="phone" class="inputBox3" placeholder="###-###-####">
<p id="formSubheader">Project Description</p>
<textarea name="description" class="inputBox4"></textarea>
<br>
<button type="submit" id="myButton2">Submit</button>
</div>
</div>
<div id="myModal2" class="modal2">
<div class="modal2-content">
<span id="close">×</span>
<p class="formHeader2">Thank you for your interest. I will get back to you soon!</p>
</div>
</div>
<script>
var modal = document.getElementById("myModal");
var modal2 = document.getElementById("myModal2");
var btn = document.getElementById("myButton");
var btn2 = document.getElementById("myButton2");
var close = document.getElementById("close");
btn.onclick = function() {
modal.style.display = "block";
}
btn2.onclick = function() {
modal.style.display = "none";
modal2.style.display = "block";
}
close.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
modal2.style.display = "none";
}
}
</script>
</body>
</html>