The code to execute with JavaScript will be the following

[arafatrahman89]

1 – Create the modal window with HTML and CSS
The first step is to create the window, style it, size it, and position it as it will appear when the user scrolls the page. HTML and CSS are used for this purpose. Here is an illustration:


2 – Hide Popup Window with CSS
After the first pass, the popup is displayed and the page background is chile number screening darkened, as indicated by the CSS. However, by default, the popup should be hidden and the page should be divided into sections so that the popup is identified by the "popup" HTML div. To hide the default popup, you can use the CSS display property and set it to none and associate it with the "popup" div.


3 – Enable pop-up display with JavaScript
After the previous step, the page appears blank and the visitor does not see any changes when scrolling. This is where JavaScript steps in to assign the behavior to the "popup" div, which is hidden.

Let's assume the popup hasn't been displayed yet;
When the visitor scrolls the page;
Activating a timer;
And the display pops up after 3 seconds.

At the end of the script, the JavaScript code will indicate that the pop-up display function has been executed. This avoids displaying the popup again every 3 seconds.

4 – How to close the pop-up with JavaScript?
After this step, nothing happens when the user clicks Close. Again, we need JavaScript to describe the behavior of the “popup-close” element.


You can also implement other methods to close the pop-up: specify that the window closes when the visitor clicks outside the pop-up or when they use the escape command, for example.

How to display a pop-up before leaving the web page?
Another popular method on the web is to display a pop-up when the user is about to leave the site. For example, if the user has not finished filling out a form, the pop-up can be useful to ensure that the user has not forgotten to validate their form. HTML and CSS are used to create the pop-up window and to hide it. JavaScript allows you to define the behavior of the pop-up.