How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS.
Have you ever wanted a pop-up mechanism on your website, but you do not want to use JavaScript? Here is the way:
- Add <details> and <Summary> to your document
- Enter <DIV> to <Details>
- Add animated scaling to this <div>
- Add this animation to <div> when the [Open] feature is switched on an item <Details>
- Switch how to turn on the button for more information.
Must Read – Modal HTML Content in Popup Window JavaScript Library
How To Create A Popup in HTML CSS Details
Post Name | How To Create Popup In HTML & CSS |
Author Name | havardob |
Category | Codepen, CSS & CSS3, HTML & HTML5, Popup Plugins |
Official Page | Click Here |
Official Website | codepen.io |
Publish Date | August 19, 2021 |
Last Update | September 13, 2023 |
Download | Link Below |
License | MIT |
How to make use of it:
1. Create a popup toggle utilizing <summary>
the aspect.
<summary>Click Me</summary>
2. Wrap your popup content along with the toggle aspect into an <details>
aspect.
<details> <summary>Click Me</summary> <div> Popup Content Here </div> </details>
3. The important CSS for the popup panel.
details { position: fixed; right: 1rem; bottom: 1rem; margin-top: 2rem; color: #6b7280; display: flex; flex-direction: column; } details div { background-color: #1e1e27; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); padding: 1.25rem; border-radius: 8px; position: absolute; max-height: calc(100vh - 100px); width: 400px; max-width: calc(100vw - 2rem); bottom: calc(100% + 1rem); right: 0; overflow: auto; transform-origin: 100% 100%; color: #95a3b9; } details div::-webkit-scrollbar { width: 15px; background-color: #1e1e27; } details div::-webkit-scrollbar-thumb { width: 5px; border-radius: 99em; background-color: #95a3b9; border: 5px solid #1e1e27; } details div > * + * { margin-top: 0.75em; } details div p > code { font-size: 1rem; font-family: monospace; } details div pre { white-space: pre-line; border: 1px solid #95a3b9; border-radius: 6px; font-family: monospace; padding: 0.75em; font-size: 0.875rem; color: #fff; } details[open] div { -webkit-animation: scale 0.25s ease; animation: scale 0.25s ease; } summary { display: inline-flex; margin-left: auto; margin-right: auto; justify-content: center; align-items: center; font-weight: 600; padding: 0.75em 3em 0.75em 1.25em; border-radius: 99em; color: #fff; background-color: #185adb; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); list-style: none; text-align: center; cursor: pointer; transition: 0.15s ease; position: relative; } summary::-webkit-details-marker { display: none; } summary:hover, summary:focus { background-color: #1348af; } summary svg { position: absolute; right: 1.25em; top: 50%; transform: translateY(-50%); width: 1.5em; height: 1.5em; } @-webkit-keyframes scale { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes scale { 0% { transform: scale(0); } 100% { transform: scale(1); } }
See Also –
Responsive Popup Modal Using HTML CSS and JavaScript
Basic Popup And Modal Plugin With jQuery | stepframemodal
A Powerful and Elegant Alert, Confirm and Prompt Popup Boxes in JavaScript | QuantumAlert
See Demo And Download

Official Website(havardob): Click Here
This superior jQuery/javascript plugin is developed by havardob. For extra Advanced Usage, please go to the official website.