CSS Modal
Posted in
3403
1:43 am, May 14, 2022
Create a modal with only CSS
and HTML...
What is Create a modal with only CSS?
Usually when creating a modal you need to use a javascript library or some javascript to show and hide and create the modal element.
The following script uses the :target pseudo class to create this modal without having to use any javascript at all.
What can i use this CSS only Modal for?
You can replace your javascript modals with this css only modal, depending on the complexity of the modal you are currently using.
Preview of CSS only Modal
How to use the CSS only Modal
- Add a button that has a link to the modal id in this case its
#demo-modal
- Add your modal content into the demo-modal container.
- Click on the "Open Demo Modal" button to show the modal.
- Click on the X to close the modal again.
Conclusion
You can see from the following code and demo that this is quite a functional modal, and as a bonus there is no complicated javascript used to control it.
Original Source
Slightly modified from the original code by @denicmarko
Create a modal with only CSS Demo
View Demo Full Screen View Demo New Tab
Create a modal with only CSS Code
HTML
<div class="wrap">
<a href="#demo-modal">Open Demo Modal</a>
</div>
<div id="demo-modal" class="modal">
<div class="modal-content">
<h1>Create a modal with only CSS</h1>
<p>
You can use the :target pseudo-class to create a modals with Zero JavaScript. Enjoy!
</p>
<div class="modal-footer">
Slightly Modified version originally Made with <i class="fa fa-heart"></i>, by <a href="https://twitter.com/denicmarko" target="_blank">@denicmarko</a>
</div>
<a href="#" class="modal-close">×</a>
</div>
</div>
CSS
.wrap {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(45deg, #dc3b3e, #3b99dc 50%, #3bdc90 75%, rgb(255 141 0) 100%);
}
.wrap a {
display: inline-block;
text-decoration: none;
padding: 10px 20px;
background-color: #fff;
border-radius: 5px;
text-transform: uppercase;
color: #585858;
font-family: 'Roboto', sans-serif;
}
.modal {
visibility: hidden;
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(77, 77, 77, .7);
transition: all .4s;
}
.modal:target {
visibility: visible;
opacity: 1;
}
.modal-content {
border-radius: 4px;
position: relative;
width: 500px;
max-width: 90%;
background: #fff;
color:#444;
padding: 1em 2em;
}
.modal-footer {
text-align: right;
a {
color: #585858;
}
i {
color: #d02d2c;
}
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
color: #585858;
text-decoration: none;
}
Related Tags
Add Comment
Other Items in CSS Modal
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
HTML Canvas
javascript