Cara Membuat Animated Pop Up


Langsung saja ke pointnya, karna bikin artikelnya pas tengah malam :D

1. Login ke Blogger > template > Edit HTML
lalu tambahkan Script dibawah ini

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

2. Tambahkan CSS berikut sebelum </style>

@import 'https://sites.google.com/site/animasicss/pop-up/pop-up.css';
.btn-abdur {
float:left;
list-style:none;
text-align:center;
width:100%;
margin:0px;
padding:0px;
clear:both;
}

.button {
  position: relative;
  width: 240px;
  margin: auto;
  height: 70px;
  display: block;
  font-size: 2em;
  color: #fff;
  background: cornflowerblue;
  border: none;
  outline: none;
  cursor: pointer;
}
.button:hover {
  opacity: 0.92;
  background: transparent;
  color: #5282d8;
  border:2px solid #5282d8;
  box-shadow: none;
}
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.7);
  -moz-transition:all 0.2s;
  -webkit-transition:all 0.2s;
  transition:all 0.2s;
}
.popup {
  position: relative;
  width: 32%;
  margin: 200px auto;
  padding: 18px;
  background: #e7e7e7;
  border-radius: 6px;
  -moz-transition: all 0.5s cubic-bezier(0.6, -0.28, 0.74, 0.05);
  -webkit-transition: all 0.5s cubic-bezier(0.6, -0.28, 0.74, 0.05);
  transition: all 0.5s cubic-bezier(0.6, -0.28, 0.74, 0.05);
}
.popup .heading {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 15px;
  right: 32px;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
}
.popup .close:hover {
  color: #d62222;
}
.popup .isi-popup {
  max-height: 30%;
  overflow: auto;
}

3. Dan tambahkan Javascript dibawah sebelum </body>

$(document).ready(function(){

  $('.button').click(function(){
    $('.overlay').css({'display':'block'});
    $('.popup').addClass('animated zoomInUp');
    $('.popup').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){
      $('.popup').removeClass('animated zoomInUp');
    });
  });

    $('.close').click(function(){
    $('.popup').addClass('animated zoomOutUp');
    $('.popup').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){
      $('.popup').removeClass('animated zoomOutUp');
    });
    setTimeout(function(){
       $('.overlay').css({'display':'none'});
     }, 1017);
  });

});


Untuk Demonya silahkan klik button dibawah

jika masih ada yang dibingungkan silahkan tanya dikolom komentar

Lorem ipsum is simply dummy text of the printing and typesetting industry.

Berikan komentar anda sesuai Topic yang ada.