Modal Dialog

Developer
Gigaleet
Size
2,251 Kb
Views
6,069

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 Previews
IQ Test

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 */
Modal Dialog - Script Codes
Modal Dialog - Script Codes
Home Page Home
Developer Gigaleet
Username Gigaleet
Uploaded January 08, 2023
Rating 3
Size 2,251 Kb
Views 6,069
Do you need developer help for Modal Dialog?

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!

Gigaleet (Gigaleet) Script Codes
Name
CSS placeholder labels
Pure CSS Hamburger Button
FlexBox Fixed Left Side Bar and Header Layout
Status Loader
Light Box
A Pen by Gigaleet
Modern Login Box
Create amazing captions with AI!

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!