<div id="dialogEffects" class="sally">
<div id="somedialog" class="dialog">
<div class="dialog__overlay"></div>
<div class="dialog__content">
<h2><strong>Howdy</strong>, I'm dialog box </h2><div><button class="action" data-dialog-close="">Close</button></div>
</div>
</div>
</div>
<div class="content">
<h1>Simple Dialog Effects</h1>
<div class="effects">
Select an effect:
<ul>
<li>
<a href="#" class="dialogEffects" data-class="sandra">Sandra</a>
</li>
<li>
<a href="#" class="dialogEffects selected" data-class="sally">Sally</a>
</li>
<li>
<a href="#" class="dialogEffects" data-class="don">Don</a>
</li>
</div>
<div class="button-wrap"><button data-dialog="somedialog" class="trigger">Open Dialog</button></div>
</div>
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Raleway:200,600,700,400);
body {
background: #cae4b6;
color: #c94e50;
font-weight: 400;
font-size: 1em;
font-family: 'Raleway', Arial, sans-serif;
}
a {
color: #74716D;
text-decoration: none;
outline: none;
&:hover {
color: #c94e50;
outline: none;
}
}
button {
padding: 1em 2em;
outline: none;
font-weight: 600;
border: none;
color: #fff;
background: #c94e50;
}
.content {
max-width: 1000px;
padding: 0 1em;
margin: 0 auto;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.effects {
background: rgba(white, .2);
padding: 1em;
max-width: 12em;
margin: 2em auto 0;
ul {
margin: 1em 0 0;
padding: 0;
list-style: none;
li {
margin: 0 0 .5em 0;
&:last-of-type {
margin-bottom: 0;
}
a {
padding: .5em;
display: block;
border: 1px solid #eee;
&:hover {
background: rgba(#fff, .5);
}
&.selected {
color: #c94e50;
background: rgba(#fff, .2);
border-color: #c94e50;
}
}
}
}
}
.button-wrap {
padding: 2.5em 0 0;
font-size: 1.25em;
}
button.trigger {
background: #c94e50;
color: #fff;
border: none;
}
// DIALOG
.dialog,
.dialog__overlay {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.dialog {
position: fixed;
@include display-flex();
@include align-items(center);
@include justify-content(center);
pointer-events: none;
}
.dialog__overlay {
position: absolute;
z-index: 1;
background: rgba(55, 58, 71, 0.9);
opacity: 0;
-webkit-backface-visibility: hidden;
@include transition(opacity 0.3s);
}
.dialog--open .dialog__overlay {
opacity: 1;
pointer-events: auto;
}
.dialog__content {
width: 50%;
max-width: 560px;
min-width: 290px;
background: #fff;
padding: 4em;
text-align: center;
position: relative;
z-index: 5;
opacity: 0;
}
.dialog--open .dialog__content {
pointer-events: auto;
}
/* Content */
.dialog h2 {
margin: 0;
font-weight: 400;
font-size: 2em;
padding: 0 0 2em;
margin: 0;
.don & {
&:after {
content: 'don';
}
}
.sandra & {
&:after {
content: 'sandra';
}
}
.sally & {
&:after {
content: 'sally';
}
}
}
// ------------ EFFECT sandra
.sandra {
.dialog.dialog--open .dialog__content,
.dialog.dialog--close .dialog__content {
@include animation-duration(0.3s);
@include animation-fill-mode(forwards);
}
.dialog.dialog--open .dialog__content {
@include animation-name(sandra-open);
}
.dialog.dialog--close .dialog__content {
@include animation-name(sandra-close);
}
}
@include keyframes(sandra-open) {
0% { opacity: 0; @include transform(scale3d(1.1, 1.1, 1)); }
100% { opacity: 1; @include transform(scale3d(1, 1, 1)); }
}
@include keyframes(sandra-close) {
0% { opacity: 1; }
100% { opacity: 0; @include transform(scale3d(0.9, 0.9, 1)); }
}
// ------------ EFFECT sally
.sally {
.dialog__overlay {
@include transition-duration(0.4s);
}
.dialog.dialog--open .dialog__content,
.dialog.dialog--close .dialog__content {
@include animation-duration(0.4s);
@include animation-fill-mode(forwards);
}
.dialog.dialog--open .dialog__content {
@include animation-name(sally-open);
@include animation-timing-function(cubic-bezier(0.6,0,0.4,1));
}
.dialog.dialog--close .dialog__content {
@include animation-name(sally-close);
}
}
@include keyframes(sally-open) {
0% { opacity: 0; @include transform(scale3d(0, 0, 1)); }
100% { opacity: 1; @include transform(scale3d(1, 1, 1)); }
}
@include keyframes(sally-close) {
0% { opacity: 1; }
100% { opacity: 0; @include transform(scale3d(0.5, 0.5, 1)); }
}
// ------------ EFFECT don
.don {
.dialog.dialog--open .dialog__content,
.dialog.dialog--close .dialog__content {
@include animation-timing-function(linear);
@include animation-duration(1s);
@include animation-fill-mode(forwards);
}
.dialog.dialog--open .dialog__content {
@include animation-name(don-open);
}
.dialog.dialog--close .dialog__content {
@include animation-name(don-close);
@include animation-duration(0.3s);
@include animation-timing-function(ease-out);
}
}
@include keyframes(don-open) {
0% { opacity: 0; @include transform(matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
2.083333% { @include transform(matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
4.166667% { @include transform(matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
6.25% { @include transform(matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
8.333333% { @include transform(matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
10.416667% { @include transform(matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
12.5% { @include transform(matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
14.583333% { @include transform(matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
16.666667% { @include transform(matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
18.75% { @include transform(matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
20.833333% { @include transform(matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
22.916667% { @include transform(matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
25% { @include transform(matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
27.083333% { @include transform(matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
29.166667% { @include transform(matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
31.25% { @include transform(matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
33.333333% { @include transform(matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
35.416667% { @include transform(matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
37.5% { @include transform(matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
39.583333% { @include transform(matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
41.666667% { @include transform(matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
43.75% { @include transform(matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
45.833333% { @include transform(matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
47.916667% { @include transform(matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
50% { opacity: 1; @include transform(matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
52.083333% { @include transform(matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
54.166667% { @include transform(matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
56.25% { @include transform(matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
58.333333% { @include transform(matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
60.416667% { @include transform(matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
62.5% { @include transform(matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
64.583333% { @include transform(matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
66.666667% { @include transform(matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
68.75% { @include transform(matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
70.833333% { @include transform(matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
72.916667% { @include transform(matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
75% { @include transform(matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
77.083333% { @include transform(matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
79.166667% { @include transform(matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
81.25% { @include transform(matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
83.333333% { @include transform(matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
85.416667% { @include transform(matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
87.5% { @include transform(matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
89.583333% { @include transform(matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
91.666667% { @include transform(matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
93.75% { @include transform(matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
95.833333% { @include transform(matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
97.916667% { @include transform(matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
100% { opacity: 1; @include transform(matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); }
}
@include keyframes(don-close) {
0% { opacity: 1; }
100% { opacity: 0; @include transform(scale3d(0.8, 0.8, 1)); }
}
View Compiled
(function($) {
var dialog;
$('.trigger').on('click', function() {
dialog = $('#' + $(this).data('dialog'));
$(dialog).addClass('dialog--open');
});
$('.action, .dialog__overlay').on('click', function() {
$(dialog).removeClass('dialog--open');
$(dialog).addClass('dialog--close');
$(dialog).find('.dialog__content').on('webkitAnimationEnd MSAnimationEnd oAnimationEnd animationend', function() {
$(dialog).removeClass('dialog--close');
});
});
$('.dialogEffects').on('click', function(e) {
e.preventDefault();
$('.dialogEffects').removeClass('selected');
$(this).addClass('selected');
var cssClass = $(this).data('class');
$('#dialogEffects').removeAttr('class').addClass(cssClass);
});
})(jQuery);
This Pen doesn't use any external CSS resources.