Saibbyweb Saibbyweb - 3 months ago 8
CSS Question

Change background of the modal before the delay

I use this

material modal pop-up
( http://codepen.io/ettrics/pen/Jdjdzp/ ) on my website, it works perfectly fine but I need one modification. As you can see in the snippet, once the button is clicked there is a delay of 400ms and after that modal content shows up. The background of the modal content also changes after the defined delay of 400ms. What I want is that background color should change
immediately once the button is clicked
and the modal content should load normally after 400ms.

&__bg
class controls the background of the modal. It's set to transparent in the snippet. Kindly suppose it to be any solid color like black.

I don't have any experience in JAVA SCRIPT.
A LITTLE HELP WOULD BE APPRECIATED.

Answer

here is a modified pen of the changes you want.

The thing is you want to show the modal instantly but hide the content for a while

window.setTimeout(function(){
                // reveal the modal content
                content.classList.add('modal__content--active');
            },contentDelay);

http://codepen.io/anon/pen/ZpYEvL