Membuat Modal Popup Dengan Javascript Di Blogger

popup button with pure javascript

Cara Membuat Modal Popup Button Responsive Full Screen

Cara Membuat Popup Button di Postingan Blog, kali ini saya akan membagikan script untuk menciptakan sebuah popup window saat button di klik dengan javascript.
Script popup ini dapat kalian pasang di postingan, sidebar, hidangan dll dan untuk tampilannya dapat di sesuaikan dengan harapan kalian.

Sebelumnya saya juga sudah pernah posting artikel ihwal menciptakan popup di blogger secara otomatis tanpa button, dapat kalian lihat di artikel berikut.

  • Login ke akun blogger kalian
  • Pilih hidangan TemplateEdit HTML
  • Sekarang, cari aba-aba </head>. Kalo udah ketemu, masukan CSS dibawh ini sempurna diatasnya
     <style type="text/css"> .openPopup,.btn{display:block} .openPopup,.btn,. .content{text-align:center} .openPopup{margin:0 auto;padding:12px 15px;outline:0;border:0;box-sizing:border-box;cursor:pointer;background-color:#0091ea;font-size:16px;color:#fff;border-radius:3px;box-shadow:0 2px 5px 0 rgba(0,0,0,0.26);min-width:7em} .btn{color:#3A3A3A;background:#f9f9f9;padding:20px;margin:60px auto 50px auto;border:2px solid #3A3A3A;border-radius:2px;text-decoration:none;max-width:120px;font-size:14px} . .content strong{font-size:50px} . .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}} .Open,.Open body{overflow:hidden;position:absolute;top:0;left:0;right:0;bottom:0} .Open .{-webkit-animation:a .5s cubic-bezier(.34,.34,.26,.99);animation:a .5s cubic-bezier(.34,.34,.26,.99)} .Closed .{-webkit-animation:b .25s ease-in;animation:b .25s ease-in} .{position:absolute;z-index:9999;max-width:100%;padding:50px 15px 15px;box-sizing:border-box} .,.:after{top:0;right:0;bottom:0;left:0} .:after{content:"";position:fixed;z-index:9998;background:#fff} .>.TSloseBtn{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} .>.TSloseBtn>svg{width:30px;height:100%;fill:#adadad;-webkit-transition:transform .3s ease-in-out;transition:transform .3s ease-in-out} .>.TSloseBtn:hover>svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)} .>.TSloseBtn:active{margin-top:1px} .>.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){.{padding:80px 30px 30px}.>.TSloseBtn{right:10px;top:0.50em;width:40px;height:40px}.>.TSloseBtn>svg{width:30px;height:100%}.>.content{left:30px;right:30px}} </style> 
  • Selanjutnya cari lagi aba-aba </body>. Kalo udah ketemu, masukan Javascript dibawh ini sempurna diatasnya
     <script type="text/javascript"> //<![CDATA[ {'use strict';var $html;let  = 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,' ');}.prototype = {init() {$html.className += ' Open';this.buildPopup();},buildPopup() {document.body.insertAdjacentHTML('beforeend','<div class="">\<button type="button" class="TSloseBtn">\<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('TSloseBtn')[0].addEventListener('click', this.close.bind(this));},close() {$html.className += ' Closed';document.getElementsByClassName('')[0].addEventListener('animationend', function(e) {e.target.parentNode.removeChild(this);removeClass($html, 'Open Closed');});}};window. = ;window..close = .prototype.close;} //]]> </script> 
  • Sekarang Save template

Selanjutnya kalian tinggal memasang HTMLnya. Bisa kalian pasang di dalam postingan, laman, widget / di edit html.
Tapi pada tutorial ini, saya akan memasangnya di dalam postingan.

  • Buat postingan gres atau edit postingan yang ingin dipasang popup windowsnya.
  • Kalau sudah, pilih mode HTML bukan Compose
  • Lalu kalian copy dan paste aba-aba popup dibawah ini
     <button class="openPopup" type="button">Open Popup</button>   <script type="text/javascript"> document.querySelector('.openPopup').addEventListener('click', function() {     var jPopupDemo = new jPopup({         contentHtml: "KODE POPUP KALIAN SIMPAN DI SINI"     }); }); </script> 

    Open Popup, tombol button untuk membuaka popup

    KODE POPUP KALIAN SIMPAN DI SINI, ganti dengan script yang ingin dijadikan popup.
    dapat di isi dengan iframe, jpg, video dll
    #contoh
     <button class="openPopup" type="button">Open Popup</button>   <script type="text/javascript"> document.querySelector('.openPopup').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>"     }); }); </script> 

    Kalian juga dapat menciptakan beberapa popup yang berbeda di satu halaman dengan mengganti atau menambah class yang akan di targetkan.

    Pemasangan html popup di javascriptnya jangan ada kutip dua " tapi gunakan kutip satu '
  • Untuk melihat kesannya kalian dapat priview / pertinjauan dulu.
  • Kalo sudah, tinggal publikasikan

Cukup sekian artikel ihwal Cara Membuat Button Popup Di Blogger ini biar bermanfat. Apabila ada yang tidak dimengerti, silahkan bertanya di kolom komentar. Keyword Terkait : cara menciptakan pop up di website, cara menciptakan pop up window di blogspot, cara menciptakan pop up box card


Sumber https://mastamvan.blogspot.com/

0 Response to "Membuat Modal Popup Dengan Javascript Di Blogger"

Post a Comment

Silahkan berkomentar.
Perhatian! Komentar yang mengandung spam tidak akan di terima.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel