CSS Modal

Developer
Pete Nawara
Size
3,981 Kb
Views
36,432
  1. CSS Modal Previews
  2. CSS Modal HTML Codes
  3. CSS Modal CSS Codes
  4. CSS Modal JS Codes

How do I make an css modal?

Based on: http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/. What is a css modal? How do you make a css modal? This script and codes were developed by Pete Nawara on 10 September 2022, Saturday.

CSS Modal Previews
IQ Test

CSS Modal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Modal</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="button" href="#openModal">Open it up!</a>
<div id="openModal" class="modalbg"> <div class="dialog"> <a href="#close" title="Close" class="close">X</a>	<h2>Holy Crap!!!</h2>	<p>You freakin' did it!</p>	<p>You opened up the freakin' modal window! Now close it, ya dingus.</p> <p class="fineprint">Based on the article "Creating a modal window with HTML5 & CSS3" at <a href="webdesignerdepot.com">Webdesigner Depot</a></p> <p class="fineprint">p.s. Sorry for calling you a dingus earlier.</p>	</div>
</div> <script src="js/index.js"></script>
</body>
</html>

CSS Modal - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
body { width: 100%; background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) repeat #fefefe;
}
.button { margin: 40px auto; font-size: 72px; font-family: 'Yanone Kaffeesatz', Arial, sans-serif; text-decoration: none; text-shadow: 1px 1px 0px #fff; font-weight: 400; color: #666; border: 1px solid #ccc; cursor: pointer; padding: 20px 70px 30px; position: relative; top: 50px; background: #eee; width: 300px; display: block; text-align: center; box-shadow: 1px 1px 1px #fff; -moz-box-shadow: 1px 1px 1px #fff; -webkit-box-shadow: 1px 1px 1px #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;
}
.button:hover { color: #333; background: #eeffff; -moz-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;
}
.modalbg { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0); z-index: 99999; -moz-transition: all 2s ease-out; -webkit-transition: all 2s ease-out; -o-transition: all 2s ease-out; transition: all 2s ease-out; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -transition-delay: 0.2s; display: block; pointer-events: none;
}
.modalbg .dialog { width: 400px; position: relative; top: -1000px; margin: 10% auto; padding: 5px 20px 13px 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #ccc); background: -webkit-linear-gradient(#fff, #ccc); background: -o-linear-gradient(#fff, #ccc); box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; -webkit-box-shadow: 0 0 10px #000;
}
.modalbg .dialog .ie7 { filter: progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=135, Strength=3);
}
.modalbg:target { display: block; pointer-events: auto; background: rgba(4, 10, 30, 0.8); -moz-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;
}
.modalbg:target .dialog { top: -20px; -moz-transition: all 0.8s ease-out; -webkit-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; transition: all 0.8s ease-out; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; -transition-delay: 0.4s;
}
.close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; -webkit-box-shadow: 0 0 10px #000; -moz-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -transition-delay: 0.2s;
}
.close .ie7 { filter: progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=135, Strength=3);
}
.close:hover { background: #00d9ff; -moz-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;
}
.fineprint { font-style: italic; font-size: 10px; color: #646;
}
a { color: #333; text-decoration: none;
}

CSS Modal - Script Codes JS Codes

/* sorry for the sloppy less. */
/* don't tell Jen Myers */
CSS Modal - Script Codes
CSS Modal - Script Codes
Home Page Home
Developer Pete Nawara
Username petebot
Uploaded September 10, 2022
Rating 4.5
Size 3,981 Kb
Views 36,432
Do you need developer help for CSS Modal?

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!

Pete Nawara (petebot) Script Codes
Name
Ridonk Expando
The Team
Woman in Vintage Sunglasses
Button Tooltips
Card flip
ScrollMagic playpen
Mr. Blinky
Toggle Time
Dynamic Logo Creation
Text Shadow
Create amazing blog posts 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!