Popup Registration Form in HTML CSS (Code + Demo)
The Popup registration form is an account creation form that helps the user get account access on the website. A popup form is a javascript form that takes the details…
Simple Popup Form Using HTML, CSS, and JavaScript
Simple Popup Form: A simple popup form is the best combination of style and animation function. In this project, we will create a form that helps users login to the…
How to Create Automatic Popup Window using HTML & CSS
An automatic popup window is a javascript project that uses different javascript functions and loads as soon as the website loads on the user's browsers this type of automatic pop-up…
How to Create Popup Window in PHP (Tutorial + Code)
In this article you will know how to create Popup Window with php. Earlier I have shared many types of Popup Window tutorials. Some just by html and css. Again…
How To Create a Modal Popup using JavaScript
This article will help you to know how to create Modal Popup JavaScript. Here we have shared step by step tutorial using JavaScript to create a modal popup.
Earlier I showed you how to create an automatic popup window. However, here you can open the window in two ways, automatic and manual.
When we open a website, we see different types of subscription forms, such as Advantage, with the help of this type of JavaScript Modal Popup. However, the javascript popup window used on most websites is automatic. This means that when the page is opened, this popup box is automatically seen.
Modal Popup JavaScript
This design is a little different. This Modal Popup JavaScript will be visible when you load the page. There is also a button that allows you to see this box. Below is a preview of how this design works.
See the Pen
Modal by Foolish Developer (@foolishdevweb)
on CodePen.
As I said it is an automatic and manual model pop-up created by JavaScript. First I used a gradient background color on the page.
Then I created a button that can be used to manually view this Modal Popup JavaScript. Also, when you load that page, this window will automatically appear in front of you.
There is a Cancel button to hide Modal Popup. This window contains an image, a heading, some text, and a cancel button.
How to Create a Modal popup in JavaScript
If you know basic HTML, CSS, and javascript then you can easily create this modal popup in javascript. First I added basic information using HTML.
Then I designed it with CSS and arranged it to open it automatically. Finally, the popup button and the cancel button have been activated by JavaScript.
Step 1: Create popup button
We first created a button using the following HTML and CSS code that will act as a popup button.
<button class=”btn open-modal” id=”open-modal”>Open Modal</button>
I designed the webpage using the following CSS. The linear-gradient background color is used on the page.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: “PT Sans”, sans-serif;
background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}
Now I have designed the button. Depending on the size padding of this button.
.btn {
font-family: “PT Sans”, sans-serif;
font-size: 1.2rem;
padding: 1rem 2.5rem;
cursor: pointer;
border: none;
}
.open-modal {
background: #fff;
border-radius: 5px;
border: 1px solid transparent;
box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.2);
transition: all 0.2s linear;
}
.open-modal:hover {
box-shadow: none;
background: rgba(255, 255, 255, 0.5);
border-color: #fff;
}
