<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h1>Animated Popup Information</h1>
<div class='wrap'>
<div class='content'>
<h2>Well Hello!</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<a class='button glyphicon glyphicon-plus' href='#'></a>
<script>
$('a').on('click', function(){
$('.wrap, a').toggleClass('active');
return false;
});
</script>
body {
background: #ddd;
width: 100%;
height: 100vh;
position: relative;
}
h1 {
color: #c7c7c7;
font-weight: 200;
text-align: center;
position: absolute;
top: 45%;
width: 100%;
}
h2 {
color: #007fed;
font-weight: bold;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
margin-bottom: 15px;
}
p {
color: #001818;
}
.wrap {
position: absolute;
overflow: hidden;
top: 10%;
right: 10%;
bottom: 85px;
left: 10%;
padding: 20px 50px;
display: block;
border-radius: 4px;
transform: translateY(20px);
transition: all 0.5s;
visibility: hidden;
}
.wrap .content {
opacity: 0;
}
.wrap:before {
position: absolute;
width: 1px;
height: 1px;
background: white;
content: "";
bottom: 10px;
left: 50%;
top: 95%;
color: #fff;
border-radius: 50%;
-webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrap.active {
display: block;
visibility: visible;
box-shadow: 2px 3px 16px silver;
transition: all 600ms;
transform: translateY(0px);
transition: all 0.5s;
}
.wrap.active:before {
height: 2000px;
width: 2000px;
border-radius: 50%;
top: 50%;
left: 50%;
margin-left: -1000px;
margin-top: -1000px;
display: block;
-webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrap.active .content {
position: relative;
z-index: 1;
opacity: 1;
transition: all 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
a.button {
padding: 11px 11px 13px 13px;
outline: none;
border-radius: 50%;
background: #007fed;
color: #fff;
font-size: 24px;
display: block;
position: fixed;
left: 50%;
bottom: 20px;
top: auto;
margin-left: -25px;
transition: transform 0.25s;
}
a.button:hover {
text-decoration: none;
background: #2198ff;
}
a.button.active {
transform: rotate(135deg);
transition: transform 0.5s;
}
