Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS/Sass Modal Dialog
<!-- HTML -->
<div class="modal-dialog-background">
<div class="modal-dialog">
<h1>Submit</h1>
<div class="inner-wrapper">
<p>Press submit to record your answers.</p>
</div>
<div class="buttons">
<button type="button" class="cancel">Cancel</button>
<button type="button" class="submit">Submit</button>
</div>
</div>
</div>
<!-- END HTML -->
/**** CSS ***/
@mixin vertically-and-horizontally-centered ( $height, $width ) {
left: 50%;
margin-left: -$width / 2;
margin-top: -$height / 2;
min-height: $height;
min-width: $width;
position: fixed;
top: 35%;
}
// Draw transparent black background
div.modal-dialog-background {
@include animation(fadein 0.4s);
background-color: transparent;
height: 100%; // Fixes background display on iPad
left: 0;
position: fixed;
@include radial-gradient(50% 40%, circle cover, hsla(0, 0%, 0%, 0.20) 20%, hsla(0, 0%, 0%, 0.25) 35%, hsla(0, 0%, 0%, 0.7) 100%);
top: 0;
width: 100%;
z-index: 9998;
//iPad [portrait + landscape] - Fix background not covering entire document on scroll
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
background: hsla(0, 0%, 0%, 0.4); // remove gradient
height: 200%;
}
}
div.modal-dialog {
$dialog-width: 500px;
@extend .animation-zoom-in; // Animation-keyframes
background: hsl(0, 0%, 100%);
@include border-radius(5px);
border: 1px solid darken($base-border-color, 10%);
@include box-shadow(0 6px 26px 0 hsla(0%, 0%, 0%, 0.75));
padding: 0;
@include vertically-and-horizontally-centered(100px, $dialog-width);
width: $dialog-width;
z-index: 9999;
h1 {
@extend .dialog-header;
}
div.inner-wrapper {
padding: 18px;
padding-bottom: 15px;
p {
font-family: $base-font-family;
}
}
div.buttons {
padding: 10px 20px 12px;
background-color: hsl(0, 0%, 93%);
@include border-bottom-radius(5px);
border-top: 1px solid hsl(0, 0%, 80%);
button {
font-size: 16px;
@include inline-block;
margin-top: 20px;
margin: 0;
}
button.submit {
float: right;
}
}
}
@media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) {
div.modal-dialog {
$dialog-width: 300px;
margin-top: 0;
top: 20px;
@include vertically-and-horizontally-centered(100px, $dialog-width);
width: $dialog-width;
button, button.submit, button.cancel {
width: auto;
font-size: 15px;
padding-left: 1em;
padding-right: 1em;
}
}
div.buttons {
@extend .clearfix;
button, .button, input[type="submit"] {
font-weight: bold;
}
}
}
/**** END CSS ***/
@ns-1m

This comment has been minimized.

Copy link

@ns-1m ns-1m commented Jun 3, 2012

Hi,

I am looking for modal dialog for jQTouch b4 ( https://github.com/senchalabs/jQTouch ). It is using Compass/SASS now.

How can I use this gist?

I added your gist to *.scss of one of jqtouch, for example.

localhost:scss noli$ compass compile my_apple_gray_new_andy_exp.scss
error my_apple_gray_new_andy_exp.scss (Line 33: Undefined mixin 'animation'.)
create ../css/my_apple_gray_new_andy_exp.css

I got error.

How can I fix this?

Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment