A Pen by Giuseppe Canale on CodePen.
Created
March 20, 2018 13:00
-
-
Save xbeat/77b0b971bad10417c50802699e2c0582 to your computer and use it in GitHub Desktop.
Help Modal Window
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<a class="button" href="#openModal">Help!</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.</p> | |
<p class="fineprint">p.s. Sorry for calling you.</p> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz); | |
body { | |
width: 100%; | |
} | |
.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; | |
border-radius: 5px; | |
transition: all 0.5s ease-out; | |
} | |
.button:hover { | |
color: #333; | |
background: #eeffff; | |
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; | |
transition: all 2s ease-out; | |
-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; | |
border-radius: 5px; | |
background: #ccc; | |
box-shadow: 0 0 10px #000; | |
} | |
.modalbg:target { | |
display: block; | |
pointer-events: auto; | |
background: rgba(4, 10, 30, 0.8); | |
transition: all 0.5s ease-out; | |
} | |
.modalbg:target .dialog { | |
top: -20px; | |
transition: all 0.8s ease-out; | |
-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; | |
border-radius: 12px; | |
box-shadow: 0 0 10px #000; | |
transition: all 0.5s ease-out; | |
-transition-delay: 0.2s; | |
} | |
.close:hover { | |
background: #00d9ff; | |
transition: all 0.5s ease-out; | |
} | |
.fineprint { | |
font-style: italic; | |
font-size: 10px; | |
color: #646; | |
} | |
a { | |
color: #333; | |
text-decoration: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment