Learn how to create a pure CSS modal popup window for your website in this step-by-step guide. No JavaScript needed! Customize the design and add functionality with HTML and CSS.
Table of Contents
In this blog post, we will be showing you how to create a pure CSS modal popup window for your website. Modal popups are a popular web design element that can provide additional information or functionality to users. Using pure CSS to create a modal popup provides several advantages, including faster page load times, improved accessibility, and more control over the design.
What is a modal window? A modal window is a type of pop-up window that is typically used for interaction in web applications. Modals are often used for things like asking for input, or displaying information about a particular feature such as an upload button. They're also sometimes used to show hidden content, such as when you want to show more options than can fit on one screen, or when you want to give the user the option of saving some content for later.
Modal windows are a great way to add interactivity to your website. You can take visitors' inputs and present them with different options that they then have to decide whether they want or not.
Let's start making these amazing modal pop-up window Using HTML and Pure CSS step by step.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. This HTML file will include the code for your popup window, as well as the CSS for its styling. In this file, you need to create a div element. This div will house all of the elements of your popup window. Next, you need to add a container for your popup window. This container will hold all of the content and style of your popup window.
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Step 2 (CSS Code):
Next, we need to add the code for our popup window to the CSS file. This code will include the code for our popup window’s content and styling.
This will give our modal an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
html,
body {
height: 100%;
}
html {
font-size: 18px;
line-height: 1.4;
}
body {
font-family: "Segoe UI";
font-weight: 600;
background-image: linear-gradient(#e66465, #9198e5);
color: black;
overflow: hidden;
}
a {
color: inherit;
text-decoration: none;
}
.container {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
.modal-window {
position: fixed;
background-color: rgba(255, 255, 255, 0.25);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
}
.modal-window:target {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.modal-window > div {
border-radius: 1rem;
}
.modal-window div:not(:last-of-type) {
margin-bottom: 15px;
}
.btn {
background-color: white;
padding: 1em 1.5em;
border-radius: 0.5rem;
text-decoration: none;
}
button {
font: inherit;
}
*::-webkit-scrollbar {
background-color: transparent;
width: 12px;
}
*::-webkit-scrollbar-thumb {
border-radius: 99px;
background-color: #ddd;
border: 4px solid #fff;
}
.modal-container {
max-height: 90vh;
max-width: 500px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.25);
}
@media (max-width: 600px) {
.modal-container {
width: 90%;
}
}
.modal-container-header {
padding: 16px 32px;
border-bottom: 1px solid #ddd;
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-container-title {
display: flex;
align-items: center;
gap: 8px;
line-height: 1;
font-weight: 700;
font-size: 1.125;
}
.modal-container-body {
padding: 24px 32px 51px;
overflow-y: auto;
}
.modal-container-footer {
padding: 20px 32px;
display: flex;
align-items: center;
justify-content: flex-end;
border-top: 1px solid #ddd;
gap: 12px;
position: relative;
}
.modal-container-footer:after {
content: "";
display: block;
position: absolute;
top: -51px;
left: 24px;
right: 24px;
height: 50px;
flex-shrink: 0;
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.75), transparent);
pointer-events: none;
}
.button {
padding: 12px 20px;
border-radius: 8px;
background-color: transparent;
border: 0;
font-weight: 600;
cursor: pointer;
transition: 0.15s ease;
}
.button.is-ghost:hover, .button.is-ghost:focus {
background-color: #dfdad7;
}
.button.is-primary {
background-color: #e66465;
color: #fff;
}
.button.is-primary:hover, .button.is-primary:focus {
background-color: #db4848;
}
.icon-button {
padding: 0;
border: 0;
background-color: transparent;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
cursor: pointer;
border-radius: 8px;
transition: 0.15s ease;
}
.icon-button svg {
width: 24px;
height: 24px;
}
.icon-button:hover, .icon-button:focus {
background-color: #dfdad7;
} Final Output:
Conclusion:
In this blog post, we have shown you how to create a pure CSS modal popup window for your website. Using pure CSS to create a modal popup provides several advantages, including faster page load times, improved accessibility, and more control over the design. By following the steps outlined in this post, you can create a customizable and functional modal popup for your website without the need for JavaScript.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
