Home / Test Modal
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz); .transition (@time: .5s, @range: all, @ease: ease-out) { -moz-transition: @range @time @ease; -webkit-transition: @range @time @ease; -o-transition: @range @time @ease; transition: @range @time @ease; } .transition-delay (@time: .4s) { -webkit-transition-delay: @time; -moz-transition-delay: @time; -o-transition-delay: @time; -transition-delay: @time; } .border-radius(@radius) { -moz-border-radius:@radius; -webkit-border-radius:@radius; border-radius: @radius; } .gradient (@coler1: #fff, @coler2: #ccc) { background: @coler1; background: -moz-linear-gradient(@coler1, @coler2); background: -webkit-linear-gradient(@coler1, @coler2); background: -o-linear-gradient(@coler1, @coler2); } .box-shadow(@dims:0 0 10px, @color:#000) { box-shadow: @dims @color; // Opera, FFX4 -moz-box-shadow:@dims @color; // FFX3.5 -webkit-box-shadow:@dims @color; // Safari/Chrome/WebKit .ie7 { filter: e(%("progid:DXImageTransform.Microsoft.Shadow(color='%d', Direction=135, Strength=3)", @color)); } } .inset(@dims:1px 1px 1px, @color:#fff) { box-shadow: @dims @color; // Opera, FFX4 -moz-box-shadow:@dims @color; // FFX3.5 -webkit-box-shadow:@dims @color; // Safari/Chrome/WebKit } 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; .inset; .border-radius(5px); .transition; &:hover{ color: #333; background: #eeffff; .transition;} } .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; .transition(2s); .transition-delay(.2s); display: block; pointer-events: none; .dialog { width: 400px; position: relative; top: -1000px; margin: 10% auto; padding: 5px 20px 13px 20px; .border-radius(10px); .gradient; .box-shadow; } } .modalbg:target { display: block; pointer-events: auto; background: rgba(4, 10 ,30, .8); .transition(); .dialog { top: -20px; .transition(.8s); .transition-delay; } } .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; .transition; .transition-delay(.2s); &:hover { background: #00d9ff; .transition; } } .fineprint { font-style: italic; font-size: 10px; color: #646; } a { color: #333; text-decoration: none; } //HTML Open it up!
X

Holy Crap!!!

You freakin' did it!

You opened up the freakin' modal window! Now close it, ya dingus.

Based on the article "Creating a modal window with HTML5 & CSS3" at Webdesigner Depot

p.s. Sorry for calling you a dingus earlier.