Cara Membuat Pop Up di blogger

ZTN CODE Kali ini saya akan memberikan script cara membuat tombol Pop Up, jika ditekan maka akan muncul pop up window dihalaman website atau blog menggunakan HTML,CSS dan JavaScript.

tombol Pop Up ini bisa diletakkan dimanapun kalian inginkan.

tombol Pop Up ini biasanya digunakan untuk menampilkan menu lain seperti formulir, pemberitauan atau ucapan terimakasih dan dll.

oke tanpa berlama-lama silahkan disimak tutorial nya.

1). pertama jika kamu menggunakan blogger, cari ]]></b:skin> atau letakan di dalam </style> letakan CSS dibawah ini tepat diatas/dalam kode tadi.

CSS

/* By https://ztncoding.blogspot.com */
.openPopup {
  display: block;
  margin: 1.5em auto;
  padding: 12px 15px;
  outline: 0;
  border: 0;
  box-sizing: border-box;
  cursor: pointer;
  background-color: #0091ea;
  font-size: 16px;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
  min-width: 7em;
}

.btn {
  color: #3A3A3A;
  text-align: center;
  background: #f9f9f9;
  padding: 20px;
  margin: 60px auto 50px auto;
  border: 2px solid #3A3A3A;
  border-radius: 2px;
  text-decoration: none;
  display: block;
  width: 120px;
  font-size: 14px;
}

.jPopup .content {
  text-align: center;
}

.jPopup .content strong {
  font-size: 50px;
}

.jPopup .content p {
  font-size: 22px;
}

@-webkit-keyframes a {
  0% {
    opacity: 0;
    -webkit-transform: scale(.85);
    transform: scale(.85)
  }
  70% {
    opacity: 1;
    -webkit-transform: scale(1.03);
    transform: scale(1.03)
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes a {
  0% {
    opacity: 0;
    -webkit-transform: scale(.85);
    transform: scale(.85)
  }
  70% {
    opacity: 1;
    -webkit-transform: scale(1.03);
    transform: scale(1.03)
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@-webkit-keyframes b {
  0% {
    opacity: 1
  }
  to {
    opacity: 0
  }
}

@keyframes b {
  0% {
    opacity: 1
  }
  to {
    opacity: 0
  }
}

.jPopupOpen,
.jPopupOpen body {
  overflow: hidden;
  position:absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px
}

.jPopupOpen .jPopup {
  -webkit-animation: a .5s cubic-bezier(.34, .34, .26, .99);
  animation: a .5s cubic-bezier(.34, .34, .26, .99)
}

.jPopupClosed .jPopup {
  -webkit-animation: b .25s ease-in;
  animation: b .25s ease-in
}

.jPopup {
  position: absolute;
  z-index: 9999;
  max-width: 100%;
  padding: 50px 15px 15px;
  box-sizing: border-box
}

.jPopup,
.jPopup:after {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

.jPopup:after {
  content: "";
  position: fixed;
  z-index: 9998;
  background: #fff
}

.jPopup>.jCloseBtn {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9999;
  outline: 0;
  border: 0;
  box-sizing: border-box;
  cursor: pointer;
  width: 50px;
  height: 50px;
  background: transparent
}

.jPopup>.jCloseBtn>svg {
  width: 30px;
  height: 100%;
  fill: #adadad;
  -webkit-transition: transform .3s ease-in-out;
  transition: transform .3s ease-in-out
}

.jPopup>.jCloseBtn:hover>svg {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}

.jPopup>.jCloseBtn:active {
  margin-top: 1px
}

.jPopup>.content {
  top: 83px;
  left: 15px;
  right: 15px;
  position: absolute;
  z-index: 9999;
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
  bottom: 0;
  border-radius: 1em;
  overflow: hidden;
}

@media screen and (min-width:680px) {
  .jPopup {
    padding: 80px 30px 30px
  }
  .jPopup>.jCloseBtn {
    right: 10px;
    top: 0.50em;
    width: 40px;
    height: 40px;
  }
  .jPopup>.jCloseBtn>svg {
    width: 30px;
    height: 100%
  }
  .jPopup>.content {
    left: 30px;
    right: 30px
  }
}
.container {
  background-size: 600% 600%;
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: center;
  -webkit-animation: gradientShift 10s ease infinite;
  -moz-animation: gradientShift 10s ease infinite;
  animation: gradientShift 10s ease infinite;
}

.popup {
  color: #aaa;
  width: 400px;
  height: 300px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, .1);
  padding: 30px;
  position: relative;
}

.popup h1 {
  color: #000;
  font-size: 1em;
  text-align: center;
}

.popup p {
  font-size: .8em;
  line-height: 1.4em;
  text-align: center;
}

2). Kedua Cari </body> berada di palingbawah, jika sudah ketemu letakan kode JavaScript dibawah ini diatas/dalam kode </body>

JavaScript

// By https://ztncoding.blogspot.com
{'use strict';var $html;let jPopup = function(content = '') {this.content = content.contentHtml;$html = document.querySelector('html');this.init();};function removeClass(element, cssClass) {var reg = new RegExp('(^| )' + cssClass + '($| )','g');element.className = element.className.replace(reg,' ');}jPopup.prototype = {init() {$html.className += ' jPopupOpen';this.buildPopup();},buildPopup() {document.body.insertAdjacentHTML('beforeend','<div class="jPopup">\<button type="button" class="jCloseBtn">\<svg height="32px" viewBox="0 0 32 32" width="32px" xml:space="preserve"><path d="M17.459,16.014l8.239-8.194c0.395-0.391,0.395-1.024,0-1.414c-0.394-0.391-1.034-0.391-1.428,0  l-8.232,8.187L7.73,6.284c-0.394-0.395-1.034-0.395-1.428,0c-0.394,0.396-0.394,1.037,0,1.432l8.302,8.303l-8.332,8.286  c-0.394,0.391-0.394,1.024,0,1.414c0.394,0.391,1.034,0.391,1.428,0l8.325-8.279l8.275,8.276c0.394,0.395,1.034,0.395,1.428,0  c0.394-0.396,0.394-1.037,0-1.432L17.459,16.014z"/></svg>\</button>\<div class="content">' + this.content + '</div>\</div>');this.setupEvents();},setupEvents() {document.getElementsByClassName('jCloseBtn')[0].addEventListener('click', this.close.bind(this));},close() {$html.className += ' jPopupClosed';document.getElementsByClassName('jPopup')[0].addEventListener('animationend', function(e) {e.target.parentNode.removeChild(this);removeClass($html, 'jPopupOpen jPopupClosed');});}};window.jPopup = jPopup;window.jPopup.close = jPopup.prototype.close;}

3). Terakhir letakan kode HTML dan JavaScript ini dimanapun kalian inginkan.

HTML

<!-- By https://ztncoding.blogspot.com -->
<button class="openPopup a" type="button">Contoh 1</button>

<script>
document.querySelector('.openPopup.a').addEventListener('click', function() {
    var jPopupDemo = new jPopup({
        contentHtml: "<div class='container'>TULIS DISINI!</div>"
    });
});
</script>

ganti yang bertuliskan "TULIS DISINI"

atau bisa juga ganti dari <div class='container'>TULIS DISINI!</div>

tanda garis dua diatas jangan ikut di ganti atau dihapus ya yang ini "