Popup Button Pure Javascript

Simpe popup button pure javascript

by Teja Sukmana

HTML

<button class="openPopup a" type="button">Contoh 1</button>
<button class="openPopup b" type="button">Contoh 2</button>
<button class="openPopup c" type="button">Contoh 3</button>


<script type="text/javascript">
//Popup1
document.querySelector('.openPopup.a').addEventListener('click', function() {
    var jPopupDemo = new jPopup({
        contentHtml: "<div class='container'>\
        <div class='popup'><div class='smile'>&#9786</div>\
        <h1>This is a popup!</h1>\
        <p>This is a nice little message that shows what the popup is for.</p>\
        <p>Isn't this pleasant. Serene. Lovely.</p>\
        <a href='https://mastamvan.blogspot.com'>Back To Tutorial</a>\
        </div></div>"
    });
});
//Popup2
document.querySelector('.openPopup.b').addEventListener('click', function() {
    var jPopupDemo = new jPopup({
        contentHtml: "<iframe style='width:100%;height:100%' src='https://www.youtube.com/embed/bpOSxM0rNPM' frameborder='0' allowfullscreen></iframe>"
    });
});
//Popup3
document.querySelector('.openPopup.c').addEventListener('click', function() {
    var jPopupDemo = new jPopup({
        contentHtml: "<iframe style='width:100%;height:100%' src='https://mastamvan.blogspot.com' frameborder='0' allowfullscreen></iframe>"
    });
});
</script>

CSS

html,
body {
  background: #f9f9f9;
  margin: 0;
  padding: 0;
  font-family: 'Comfortaa', cursive, serif, Arial;
  color: #818da5;
}
body a{
  text-decoration:none;
  color:#334
}
.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:...

JavaScript

{'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;}