How to handle with jQuery combination of fadeOut and remove

Question

I'm creating modal window script. However, when overlay area is clicked, the overlay area is removed before fading out. I want it to be removed after fading out. I've tried by using function with fadeOut to wait for removing overlay area out, but didn't work.

Please tell me how to. Thanks, a lot in advance.

<style>
.modal {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    width: 50vw;
    background-color: #fff;
}

.overlay{
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 1;
    background: rgba(0,0,0,0.6);
}
</style>

<body>
<main>
    <div>
        <a class="open" href="" data-target="modal-01">modal-01</a><br>
        <a class="open" href="" data-target="modal-02">modal-02</a>
    </div>

    <div class="modal" id="modal-01">
        <p>modal-01 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore possimus accusamus id dolorem alias sunt, omnis consectetur odio soluta modi, temporibus ducimus reprehenderit magnam adipisci quae suscipit nemo? Molestias, blanditiis!</p>
        <a class="close" href="">CLOSE</a>
    </div><!--modal-->

    <div class="modal" id="modal-02">
        <p>modal-02 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur culpa laudantium exercitationem consectetur facere voluptate quos non nesciunt quibusdam sapiente reprehenderit quidem cumque perferendis error, tempora quod adipisci earum. Animi?</p>
        <a class="close" href="">CLOSE</a>
    </div><!--modal-->

</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
    $('.open').each(function(){
        $(this).on('click',function(e){
            e.preventDefault();
            const target = $(this).data('target');
            const id = document.getElementById(target);
            $('body').append('<div class="overlay"></div>');
            $(id).fadeIn();
            $('.overlay').fadeIn();

            $('.overlay,.close').on('click',function(){
                $('.modal,.overlay' ).fadeOut( function(){
                    $('.overlay').remove();
                });
            });
        });
    });
});
</script>
</body>

Applying the above solution to your problem: https://jsfiddle.net/wxtknecL/ — blex, Nov 03 '19 at 20:28
It did worked. Now I know it is useful when waiting for things done by using "promise" and "done". Thanks a lot. — user10991526, Nov 03 '19 at 20:48

score 1 · Answer 1 · answered Nov 03 '19 at 20:42

The problem is due to the fact that the close buttons are actually <a> tags that point to href="", which means that the page just instantly reloads when you click on them.

Switch those a tags for divs, like so:

<div class="modal" id="modal-01">
    <p>modal-01 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore possimus accusamus id dolorem alias sunt, omnis consectetur odio soluta modi, temporibus ducimus reprehenderit magnam adipisci quae suscipit nemo? Molestias, blanditiis!</p>
    <div class="close">CLOSE</div>
</div><!--modal-->

<div class="modal" id="modal-02">
    <p>modal-02 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur culpa laudantium exercitationem consectetur facere voluptate quos non nesciunt quibusdam sapiente reprehenderit quidem cumque perferendis error, tempora quod adipisci earum. Animi?</p>
    <div class="close">CLOSE</div>
</div><!--modal-->

Then, change your onClick for the overlay and close button selectors to this instead:

$('.overlay,.close').on('click',function(){
    $('.overlay' ).fadeOut(function(){
        $('.overlay').remove();
    });
    $('.modal' ).fadeOut();
});

How to handle with jQuery combination of fadeOut and remove

1 Answers1