Modal Dialog
How do I make an modal dialog?
Sample Modal Dialog box built in HTML5/CSS3. What is a modal dialog? How do you make a modal dialog? This script and codes were developed by Gigaleet on 08 January 2023, Sunday.
Modal Dialog - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Modal Dialog</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="#openModal">Open Modal</a>
<a href="#openModal2">Open Modal2</a>
<div id="openModal" class="modalDialog"> <dialog> <h1>Modal Box</h1> <p>This is a sample modal box that can be created using the powers of CSS3.</p> <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p> <a href="#" title="Close" class="close">Close</a> </dialog>
</div>
<div id="openModal2" class="modalDialog"> <dialog> <h1>Modal Box2</h1> <p>This is a sample modal box that can be created using the powers of CSS3.</p> <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p> <a href="#" title="Close" class="close">Close</a> </dialog>
</div>
</body>
</html>
Modal Dialog - Script Codes CSS Codes
/* Modal */
.modalDialog { font-family: Arial, Helvetica, sans-serif; position: fixed; background: rgba(0, 0, 0, 0.4); width: 100%; height: 100%; left: 0; top: 0; z-index: 99999; pointer-events: none; display: none; -webkit-transition: opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946); transition: opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946); will-change: opacity;
}
.modalDialog:target { display: block; pointer-events: auto; opacity: 1; -webkit-transition: opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946); transition: opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
.modalDialog > dialog { position: fixed; top: 25%; padding: 25px 25px 40px 25px; margin: 0 auto; width: 65%; max-width: 890px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 2px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6); background: #ffffff; display: block; border: none; -webkit-transform: scale(1.15); transform: scale(1.15); -webkit-transition: opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), -webkit-transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946); transition: opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), -webkit-transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946); transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946); transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), -webkit-transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946); pointer-events: none; opacity: 0; will-change: transform, opacity;
}
.modalDialog:target > dialog { pointer-events: auto; opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946), -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946); transition: opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946), -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946); transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946); transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946), -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
.modalDialog > dialog h1 { margin: 0.2em 0 0.4em 0; padding: 0; line-height: 1; font-size: 1.5em; color: #244276;
}
.modalDialog > dialog p { font-size: 0.875em; line-height: 1.6; margin: 0 0 1em 0; color: #686563;
}
.modalDialog > dialog > .close { position: absolute; bottom: 10px; right: 10px; background: none; color: #3fb8e7; outline: none; border: none; font-size: 1em; padding: 6px 10px; text-transform: uppercase; text-decoration: none;
}
.modalDialog > dialog > .close:hover { color: #78cdee;
}
/* /END Modal */
Developer | Gigaleet |
Username | Gigaleet |
Uploaded | January 08, 2023 |
Rating | 3 |
Size | 2,251 Kb |
Views | 6,072 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
A Pen by Gigaleet | 2,535 Kb |
FlexBox Fixed Left Side Bar and Header Layout | 2,822 Kb |
Light Box | 2,387 Kb |
Pure CSS Hamburger Button | 2,160 Kb |
Modern Login Box | 4,165 Kb |
Status Loader | 3,646 Kb |
CSS placeholder labels | 1,566 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
UI Challenge - Budget Selector | AgentRR007 | 3,547 Kb |
Right Click Menu | Anodpixels | 2,252 Kb |
CSS-Flexbox-Demo | Sstiglets | 1,709 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
Colorful Sliders | Chanrith | 1,246 Kb |
Base64 SVG Me | MrBambule | 44,786 Kb |
Subtle site navigation with description | Necks | 3,206 Kb |
Gears | Synvox | 3,278 Kb |
Polygon Dodecahedron in CSS | Vennsoh | 7,606 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!