Skip to content

Instantly share code, notes, and snippets.

@Quinten
Created April 3, 2014 08:30
Show Gist options
  • Save Quinten/9950598 to your computer and use it in GitHub Desktop.
Save Quinten/9950598 to your computer and use it in GitHub Desktop.
popup mobile/responsive
#area {
position: relative;
}
.popup {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #ffffff;
z-index: 5059;
padding: 3em 1em 1em 1em;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
a#closeBut {
position: absolute;
top: 7px;
right: 7px;
margin: 0;
display: block;
font-weight: bold;
padding: 5px 12px;
color: #FFF;
border-radius: 16px;
text-shadow: 0 1px 1px #0F2E54;
border: none;
background: #ff0000;
cursor: pointer;
}
a#closeBut:before {
content: "X";
}
@media screen and (min-width:768px) {
.popup {
position: absolute;
width: 512px;
min-height: 256px;
height: auto;
top: 50%;
margin-top: -128px;
left: 50%;
margin-left: -256px;
border: 4px #cacaca solid;
overflow: visible;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment