Skip to content

Instantly share code, notes, and snippets.

@bugielektrik
Last active November 3, 2022 06:41
Show Gist options
  • Save bugielektrik/1ee7d91e559c18a870e94a5e009428e6 to your computer and use it in GitHub Desktop.
Save bugielektrik/1ee7d91e559c18a870e94a5e009428e6 to your computer and use it in GitHub Desktop.
Success Modal with Animation
<div class="background"></div>
<div class="container">
<div class="row">
<div class="modalbox success col-sm-8 col-md-6 col-lg-5 center animate">
<div class="icon">
<span class="glyphicon glyphicon-ok"></span>
</div>
<!--/.icon-->
<h1>Success!</h1>
<p>We've sent a confirmation to your e-mail
<br>for verification.</p>
<button type="button" class="redo btn">Ok</button>
<span class="change">-- Click to see opposite state --</span>
</div>
<!--/.success-->
</div>
<!--/.row-->
<div class="row">
<div class="modalbox error col-sm-8 col-md-6 col-lg-5 center animate" style="display: none;">
<div class="icon">
<span class="glyphicon glyphicon-thumbs-down"></span>
</div>
<!--/.icon-->
<h1>Oh no!</h1>
<p>Oops! Something went wrong,
<br> you should try again.</p>
<button type="button" class="redo btn">Try again</button>
<span class="change">-- Click to see opposite state --</span>
</div>
<!--/.success-->
</div>
<!--/.row-->
</div>
<!--/.container-->
$(document).ready(function() {
$('.redo').click(function() {
$('.success, .error').toggle();
});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
$head-font = 'Montserrat', sans-serif
$main-font = 'Open Sans', sans-serif
$main-color = rgba(76,175,80,1)
$error-color = rgba(244,67,54,1)
animated(name, duration)
-webkit-animation name duration
-moz-animation name duration
-o-animation name duration
animation name duration
borderRadius(r)
-webkit-border-radius r
-moz-border-radius r
border-radius r
transformation(s)
-ms-transform scale(s, s)
-webkit-transform scale(s, s)
transform scale(s, s)
transitions(t)
-webkit-transition all t ease-in-out
transition all t ease-in-out
html, body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
body
overflow hidden
.background
position absolute
width 100%
height 100%
top 0
left 0
//-webkit-filter blur(5px)
//filter blur(5px)
background linear-gradient(transparent, rgba(0, 0, 0, .5)), url("https://images.pexels.com/photos/4827/nature-forest-trees-fog.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
background-size: cover;
background-position: center;
.modalbox
&.success,
&.error
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
borderRadius(2px)
background white
padding 25px 25px 15px
//border 1px solid #ddd
text-align center
&.animate
//animated(plunge, 1s)
.icon
animated(fall-in, .75s)
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
//animation-delay .6s
h1
font-family $head-font
p
font-family $main-font
button,
button:active,
button:focus
transitions(.1s)
borderRadius(30px)
margin-top 15px
width 80%
background transparent
color $main-color
border-color $main-color
outline none
&:hover
color white
background $main-color
border-color transparent
.icon
position relative
margin 0 auto
margin-top -75px
background $main-color
height 100px
width 100px
border-radius 50%
span
postion absolute
font-size 4em
color white
text-align center
padding-top 20px
&.error
button,
button:active,
button:focus
color $error-color
border-color $error-color
&:hover
color white
background $error-color
.icon
background $error-color
span
padding-top 25px
.center
float none
margin-left auto
margin-right auto
.change
clearn both
display block
font-size 10px
color #ccc
margin-top 10px
/* stupid browser compat. smh */
@-webkit-keyframes fall-in
0%
transformation(3)
opacity 0
50%
transformation(1)
opacity 1
60%
transformation(1.1)
100%
transformation(1)
@-moz-keyframes fall-in
0%
transformation(3)
opacity 0
50%
transformation(1)
opacity 1
60%
transformation(1.1)
100%
transformation(1)
@-o-keyframes fall-in
0%
transformation(3)
opacity 0
50%
transformation(1)
opacity 1
60%
transformation(1.1)
100%
transformation(1)
@keyframes fall-in
0%
transformation(3)
opacity 0
50%
transformation(1)
opacity 1
60%
transformation(1.1)
100%
transformation(1)
// currently not using plunge.
@-webkit-keyframes plunge
0%
margin-top -100%
100%
margin-top 25%
@-moz-keyframes plunge
0%
margin-top -100%
100%
margin-top 25%
@-o-keyframes plunge
0%
margin-top -100%
100%
margin-top 25%
@keyframes plunge
0%
margin-top -100%
100%
margin-top 15%
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

Success Modal with Animation

-- Animation doesn't rerun in FF currently. When successful modal appears and drops down while checkmark falls in. It's a little finnicky rendering have to tweak/adjust a little.

A Pen by Bryce Snyder on CodePen.

License.

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