Earlier I showed you how to create an automatic popup window. However, here you can open the window in two ways, automatic and manual.
There is a Cancel button to hide Modal Popup. This window contains an image, a heading, some text, and a cancel button.
Step 1: Create popup button
We first created a button using the following HTML and CSS code that will act as a popup button.
I designed the webpage using the following CSS. The linear-gradient background color is used on the page.
Now I have designed the button. Depending on the size padding of this button.
Step 2: Basic structure of Modal Popup
Now I have created the basic structure of the Modal Popup window. In this basic structure, you can add the information you need. Display: none is used here, which means that the general condition of this box cannot be seen.
I have added animations using some code below. This effect will be visible when this popup box appears.
We can’t see any box in the picture below because there is no information in this box. The box will be visible when a specific size of this box is determined or information is added.
Step 3: Add information in the modal window
Now various information has been added in this Modal Popup box. I have used an image, a heading, some text here. You will use the information here as you like.
Step 4: Button to cancel popup box
Now it’s time to create a cancel button that will help hide the popup window.
First, the constant of the id of some HTML element is determined. The id of the box, popup button, cancel button has been set to constant.
Now I have activated the popup button. I have used the on-click function here. I have instructed here that the ‘Open’ function will be added when you click on that button.
I have added in CSS what will change if the open function is implemented. In ‘open’ I used ‘display: flex’. That is, when ‘open’ is active, the Modal Popup box can be seen.
Now the Cancel button has been activated. The instructions here are that when you click on the Cancel button, ‘Open’ will be removed, meaning we will not see the box.