I successfully created a modal using CSS and jQuery. The fade in transition works perfectly, but I'm having trouble implementing a transition for when it fades out and scales back to 1.4.
The main issue is that the modal disappears too quickly.
Check out the live demo:
This is the jQuery code I used:
// jQuery functions here
Here is my HTML structure:
<div class="modal" id="register-modal">
<div class="modal-container">
<div class="modal-content">
Register modal!
</div>
</div>
</div>
And the link to open the modal:
<li><a href="#" data-toggle="register-modal" class="modal-open">Register</a></li>
Below is the CSS styling for the modal:
.modal {
// CSS styles here
}
.modal-close {
// CSS styles here
}
.modal-content {
// CSS styles here
}
.modal-container {
// CSS styles here
}
.modal.modal-visible {
// CSS styles here
}