user2566123 user2566123 - 1 month ago 13
HTML Question

Jquery Modal on click add class then remove

This bit of code is supposed to add a class and then with a delay remove the div entirely. It just jumps to deleting the div. Any ideas why?

The HTML

<!-- modal conent-->
<div class="modal" id="modal">
<div class="modal-content ">
<h1>Tricks Are 4 Kids</h1>
<p>Ok so my modal doesn't look like this one, but this is it boiled down. Can I write the JS better??? ....</p>
<button href="#" class="close" id="close" >X</button>
</div>
</div>
</div>
<!-- page conent-->
<div id="page-content-wrapper" >I am a div with all the page conent. lalalalala</div>


The CSS

.red {background:red;}


The jQuery

$(document).ready( function() {
$( "#close" ).click(function() {
$("#modal").addClass("red").delay(800).queue
$("#modal").remove();
});


Codepen https://codepen.io/Ella33/pen/GjQZRP

Answer
$(document).ready( function() {
  $( "#close" ).click(function() {
    $("#modal").addClass("red");
    setTimeout(function() {
        $("#modal").remove();
    }, 800); 
});
Comments