Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "PopUp Modal Box" project using HTML & CSS.
Preview
In the above video, you’ve seen the preview of the "PopUp Modal Box" project and I hope you are now able to create this type of project. If not, I have provided all the HTML & CSS code below.
PopUp Modal Box [Source Code]
To get the following HTML & CSS code for the PopUp Modal Box project. You need to create two files one is an HTML file, and the second one is a CSS file. After completing these two files, you can copy-paste the codes on your document.
Remember, you’ve to create a file with a .html extension for HTML code and a .css extension for CSS code.
You can also download all source code files from the given download button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PopUp Modal Box</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<label for="popup" class="submitBtn">Submit</label>
<input type="checkbox" id="popup">
<div class="popupContainer">
<h1>Warning</h1>
<span>⚠️</span>
<p>You choose not to submit the form. Press "OK" to close the form or Press "CANCEL" to get back to the
form.
</p>
<div class="okCancelButtons">
<label for="popup" class="okBtn">OK</label>
<label for="popup" class="cancelBtn">Cancel</label>
</div>
</div>
</div>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-transform: uppercase;
font-family: "Poppins", sans-serif;
}
input {
display: none;
}
body {
position: relative;
background-color: gray;
color: black;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.submitBtn {
width: 150px;
height: 50px;
text-align: center;
font-weight: 500;
line-height: 50px;
border-radius: 10px;
color: white;
background-color: red;
user-select: none;
cursor: pointer;
}
.submitBtn:active {
transform: scale(0.95);
}
.popupContainer {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 500px;
padding: 25px;
text-align: center;
border-radius: 10px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease-in-out;
opacity: 0;
}
.popupContainer h1 {
margin-top: -10px;
color: red;
}
.popupContainer span {
font-size: 50px;
}
.popupContainer p {
font-size: 14px;
text-transform: capitalize;
}
.okCancelButtons {
margin-top: 20px;
display: flex;
justify-content: space-around;
align-items: center;
}
.okCancelButtons label {
font-size: 16px;
font-weight: 600;
padding: 7px 30px;
color: black;
background-color: white;
border: 1.5px solid black;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.okCancelButtons .cancelBtn {
color: white;
background-color: red;
border: 1.5px solid red;
}
input:checked ~ .popupContainer {
top: 50%;
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
Generating Download Link...