Hey Guys,
I’m having an issue with my modal form not appearing, it just isn’t appearing!
I’ve followed sergies tutorial properly but it just isn’t working!
Could you guys or, @thesergie help out please?
Check it out at: http://informationpack.net/test/index.html
Here is the important code:
At the bottom of my index.html:
<div class="modal-background">
<div class="w-clearfix modal-window"><a class="close-modal" href="#">Close</a>
<h3>Let's get in touch.</h3>
<div class="w-row">
<div class="w-col w-col-6">
<h4>This is some text</h4>
</div>
<div class="w-col w-col-6">
<div class="w-form">
<form name="email-form" data-name="Email Form">
<label for="name">Name:</label>
<input class="w-input" type="text" placeholder="Enter your name" name="name" data-name="Name"></input>
<label for="email">Email Address:</label>
<input class="w-input" type="text" placeholder="Enter your email address" name="email" data-name="Email" required="required"></input>
<label for="email">Favorite Pet:</label>
<input class="w-input" type="text" placeholder="My dog Jumpy" name="pet" data-name="Pet" required="required"></input>
<input class="w-button form-button" type="submit" value="Submit Information" data-wait="Please wait..."></input>
</form>
<div class="w-form-done">
<p>Thank you! Your submission has been received!</p>
</div>
<div class="w-form-fail">
<p>Oops! Something went wrong while submitting the form :(</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.modal-link').click(function() {
$('.modal-background').fadeIn();
});
$('.close-modal').click(function() {
$('.modal-background').fadeOut();
});
});
</script>
My button:
<div class="buttons"><a class="modal-link button informationpack" href="#" >information pack</a>
</div>
The CSS:
.modal-background {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: 3;
display: none;
height: 100%;
padding-top: 150px;
padding-bottom: 81px;
background-color: rgba(0, 0, 0, 0.49);
}
.modal-window {
display: block;
width: 70%;
margin-right: auto;
margin-left: auto;
padding: 16px;
border-radius: 4px;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 0px 1px, rgba(0, 0, 0, 0.41) 0px 0px 17px 0px;
}
.close-modal {
float: right;
color: rgba(0, 0, 0, 0.49);
text-decoration: none;
text-transform: uppercase;
}
Please advise!
Many Thanks to those who help!