PHP
<!-- Modal Buttons -->
<a href="#" class="button || button_success" data-modals="modal_success">Modal Success</a>
<a href="#" class="button || button_danger" data-modals="modal_danger">Modal Danger</a>
<a href="#" class="button || button_warning" data-modals="modal_warning">Modal Warning</a>
<a href="#" class="button || button_info" data-modals="modal_info">Modal Info</a>
<!-- modal_success -->
<div class="image_wrap || check_wrap"></div>
<div class="modal_text">
<h3 class="modal_title">Thank You!</h3>
<p>We will contact you within one business day</p>
</div>
<button type="button" class="button || button_success || button_block || dialog_close">Ok</button>
<!-- modal_danger -->
<svg class="image_wrap || checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark_circle" cx="26" cy="26" r="25" fill="none"/>
<path class="checkmark_check" fill="none" d="M14.1 14.1l23.8 23.8 m0,-23.8 l-23.8,23.8"/>
</svg>
<div class="modal_text">
<h3 class="modal_title">Oops!</h3>
<p>You are already subscribed</p>
</div>
<button type="button" class="button || button_danger || button_block || dialog_close">Ok</button>
<!-- modal_warning -->
<div class="image_wrap">
<?= svg('iconComplain3','zoomIn') ?>
</div>
<div class="modal_text">
<h3 class="modal_title">Time to pay up!</h3>
<p>You're adding admins to you team and this may cost you more than before</p>
</div>
<div class="modal_buttons">
<button type="button" class="button || button_disable || dialog_close">Cancel</button>
<a href="#" class="button || button_warning">Continue</a>
</div>
<!-- modal_info -->
<div class="image_wrap">
<?= svg('iconInformation','zoomIn') ?>
</div>
<div class="modal_text">
<h3 class="modal_title">Summer sale</h3>
<p>Up to <b>50% OFF,</b> <br> Hurry up before the stock ends</p>
</div>
<div class="modal_buttons">
<button type="button" class="button || button_disable || dialog_close">No, Thanks</button>
<a href="#" class="button || button_info">Get It Now</a>
</div>CSS
/* common styles */
.modal_status.dialog{color:#000;background-color:#fff;text-align:center}
.modal_status.dialog .dialog_close.icon_close{display:none}
.modal_status.dialog .modal_text{margin:2rem 0}
.modal_status.dialog .modal_text .modal_title{font-size:2.6rem;font-weight:700;line-height:1.3;text-transform:initial;margin:0 auto 1rem;max-width:100%}
.modal_status.dialog .modal_text p{margin:.5rem auto;max-width:88%}
/* modal_success */
.modal_success.dialog{border-top:.6rem solid #28a745}
.modal_success.dialog .check_wrap{border:.2rem solid #28a745;overflow:hidden;-webkit-animation:wrap .3s ease-in-out forwards;-moz-animation:wrap .3s ease-in-out forwards;-o-animation:wrap .3s ease-in-out forwards;animation:wrap .3s ease-in-out forwards;-webkit-animation-delay:.3s;-moz-animation-delay:.3s;-o-animation-delay:.3s;animation-delay:.3s;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
.modal_success.dialog .check_wrap::before,.modal_success.dialog .check_wrap::after{content:'';position:absolute;background-color:#fff;width:0;height:.5rem;-webkit-transform-origin:left;-moz-transform-origin:left;-ms-transform-origin:left;-o-transform-origin:left;transform-origin:left;-webkit-animation-duration:.3s;-moz-animation-duration:.3s;-o-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:ease-in-out;-moz-animation-timing-function:ease-in-out;-o-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;animation-fill-mode:forwards}
.modal_success.dialog .check_wrap::before{top:3.2rem;left:2.1rem;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-animation-name:left;-moz-animation-name:left;-o-animation-name:left;animation-name:left;-webkit-animation-delay:.8s;-moz-animation-delay:.8s;-o-animation-delay:.8s;animation-delay:.8s}
.modal_success.dialog .check_wrap::after{top:4.2rem;left:2.9rem;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation-name:right;-moz-animation-name:right;-o-animation-name:right;animation-name:right;-webkit-animation-delay:1.1s;-moz-animation-delay:1.1s;-o-animation-delay:1.1s;animation-delay:1.1s}
@-webkit-keyframes wrap {0%{background-color:transparent;-webkit-transform:scale(0);transform:scale(0)}100%{background-color:#28a745;-webkit-transform:scale(1);transform:scale(1)}}
@-moz-keyframes wrap { 0%{background-color:transparent;-moz-transform:scale(0);transform:scale(0)} 100%{background-color:#28a745;-moz-transform:scale(1);transform:scale(1)} }
@-o-keyframes wrap { 0%{background-color:transparent;-o-transform:scale(0);transform:scale(0)} 100%{background-color:#28a745;-o-transform:scale(1);transform:scale(1)} }
@keyframes wrap { 0%{background-color:transparent;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)} 100%{background-color:#28a745;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)} }
@-webkit-keyframes left { 0%{width:0} 100%{width:1.5rem} }
@-moz-keyframes left { 0%{width:0} 100%{width:1.5rem} }
@-o-keyframes left { 0%{width:0} 100%{width:1.5rem} }
@keyframes left { 0%{width:0} 100%{width:1.5rem} }
@-webkit-keyframes right { 0%{width:0} 100%{width:3rem} }
@-moz-keyframes right { 0%{width:0} 100%{width:3rem} }
@-o-keyframes right { 0%{width:0} 100%{width:3rem} }
@keyframes right { 0%{width:0} 100%{width:3rem} }
/* modal_danger */
.modal_danger.dialog{border-top:.6rem solid #dc3545}
.modal_danger.dialog .checkmark{stroke-width:2;stroke:#fff;stroke-miterlimit:10;background-color:transparent;-webkit-box-shadow:inset 0 0 0 #dc3545;-moz-box-shadow:inset 0 0 0 #dc3545;box-shadow:inset 0 0 0 #dc3545;-webkit-animation:fill .4s ease-in-out .4s forwards,scale2 .3s ease-in-out .9s both;-moz-animation:fill .4s ease-in-out .4s forwards,scale2 .3s ease-in-out .9s both;-o-animation:fill .4s ease-in-out .4s forwards,scale2 .3s ease-in-out .9s both;animation:fill .4s ease-in-out .4s forwards,scale2 .3s ease-in-out .9s both}
.modal_danger.dialog .checkmark_circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#dc3545;fill:none;-webkit-animation:stroke .6s cubic-bezier(0.65,0,0.45,1) forwards;-moz-animation:stroke .6s cubic-bezier(0.65,0,0.45,1) forwards;-o-animation:stroke .6s cubic-bezier(0.65,0,0.45,1) forwards;animation:stroke .6s cubic-bezier(0.65,0,0.45,1) forwards}
.modal_danger.dialog .checkmark_check{-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;-webkit-animation:stroke .3s cubic-bezier(0.65,0,0.45,1) .8s forwards;-moz-animation:stroke .3s cubic-bezier(0.65,0,0.45,1) .8s forwards;-o-animation:stroke .3s cubic-bezier(0.65,0,0.45,1) .8s forwards;animation:stroke .3s cubic-bezier(0.65,0,0.45,1) .8s forwards}
@-webkit-keyframes stroke { 100%{stroke-dashoffset:0} }
@-moz-keyframes stroke { 100%{stroke-dashoffset:0} }
@-o-keyframes stroke { 100%{stroke-dashoffset:0} }
@keyframes stroke { 100%{stroke-dashoffset:0} }
@-webkit-keyframes scale2 { 0%,100%{-webkit-transform:none;transform:none} 50%{-webkit-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)} }
@-moz-keyframes scale2 { 0%,100%{-moz-transform:none;transform:none} 50%{-moz-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)} }
@-o-keyframes scale2 { 0%,100%{-o-transform:none;transform:none} 50%{transform:scale3d(1.1,1.1,1)} }
@keyframes scale2 { 0%,100%{-webkit-transform:none;-moz-transform:none;-o-transform:none;transform:none} 50%{-webkit-transform:scale3d(1.1,1.1,1);-moz-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)} }
@-webkit-keyframes fill { 100%{-webkit-box-shadow:inset 0 0 0 5rem #dc3545;box-shadow:inset 0 0 0 5rem #dc3545} }
@-moz-keyframes fill { 100%{-moz-box-shadow:inset 0 0 0 5rem #dc3545;box-shadow:inset 0 0 0 5rem #dc3545} }
@-o-keyframes fill { 100%{box-shadow:inset 0 0 0 5rem #dc3545} }
@keyframes fill { 100%{-webkit-box-shadow:inset 0 0 0 5rem #dc3545;-moz-box-shadow:inset 0 0 0 5rem #dc3545;box-shadow:inset 0 0 0 5rem #dc3545} }
/* modal_warning */
.modal_warning.dialog{border-top:.6rem solid #ffb92e}
.modal_warning.dialog .image_wrap{background-color:#ffb92e}
/* modal_info */
.modal_info.dialog{border-top:.6rem solid #119eb5}
.modal_info.dialog .image_wrap{background-color:#119eb5}SCSS
/* Vars */
$cb: #000000;
$white: #ffffff;
$success: #28a745;
$success2: #24993f;
$danger: #dc3545;
$danger2: #c82333;
$warning: #ffb92e;
$warning2: #fdae11;
$info: #119eb5;
$info2: #0890a7;
$disable: #cccccc;
$disable2: #c3bfbf;
$default: #607487;
$default2: #50606e;
/* common styles */
.modal_status.dialog {
color: $cb;
background-color: $white;
text-align: center;
.dialog_close.icon_close {
display: none;
}
.modal_text {
margin: 2rem 0;
.modal_title {
font-size: 2.6rem;
font-weight: 700;
line-height: 1.3;
text-transform: initial;
margin: 0 auto 1rem;
max-width: 100%;
}
p {
margin: 0.5rem auto;
max-width: 88%;
}
}
}
/* modal_success */
.modal_success.dialog {
border-top: 0.6rem solid $success;
.check_wrap {
border: .2rem solid $success;
overflow: hidden;
animation: wrap 0.3s ease-in-out forwards;
animation-delay: 0.3s;
transform: scale(0);
&::before, &::after {
content: '';
position: absolute;
background-color: $white;
width: 0;
height: .5rem;
transform-origin: left;
animation-duration: 0.3s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
&::before {
top: 3.2rem;
left: 2.1rem;
transform: rotate(45deg);
animation-name: left;
animation-delay: 0.8s;
}
&::after {
top: 4.2rem;
left: 2.9rem;
transform: rotate(-45deg);
animation-name: right;
animation-delay: 1.1s;
}
}
}
@keyframes wrap {
0% {
background-color: transparent;
transform: scale(0);
}
100% {
background-color: $success;
transform: scale(1);
}
}
@keyframes left {
0% {
width: 0;
}
100% {
width: 1.5rem;
}
}
@keyframes right {
0% {
width: 0;
}
100% {
width: 3rem;
}
}
/* modal_danger */
.modal_danger.dialog {
border-top: 0.6rem solid $danger;
.checkmark {
stroke-width: 2;
stroke: #fff;
stroke-miterlimit: 10;
background-color: transparent;
box-shadow: inset 0 0 0 $danger;
animation: fill .4s ease-in-out .4s forwards, scale2 .3s ease-in-out .9s both;
}
.checkmark_circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: $danger;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark_check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
}
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@keyframes scale2 {
0%, 100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
@keyframes fill {
100% {
box-shadow: inset 0 0 0 5rem $danger;
}
}
/* modal_warning */
.modal_warning.dialog {
border-top: 0.6rem solid $warning;
.image_wrap {
background-color: $warning;
}
}
/* modal_info */
.modal_info.dialog {
border-top: 0.6rem solid $info;
.image_wrap {
background-color: $info;
}
}JavaScript
if (type == 'modal_success') {
$('.dialog').addClass('modal_status modal_success modal_small');
}
if (type == 'modal_danger') {
$('.dialog').addClass('modal_status modal_danger modal_small');
}
if (type == 'modal_warning') {
$('.dialog').addClass('modal_status modal_warning modal_medium');
}
if (type == 'modal_info') {
$('.dialog').addClass('modal_status modal_info modal_medium');
}