Monday, December 23, 2019

Cara Membuat Modal Box Pure CSS

Cara Membuat Modal Box Pure CSS

HobbyTekno - Modal Box adalah sebuah kotak dialog berisi pesan yang berfungsi untuk membuat konten untuk disampaikan dengan modal box, Blog anda akan memberikan informasi atau apa saja fungsi ang tersedia didalam blog anda kepada pengunjung.

Modal Box biasanya menggunakan Javascript pada pembuatanya. Namun modal box ternyata juga bisa dibuat hanya bermodalkan CSS walaupun hasilnya tak akan semaksimal Javascript. Namun menggunakan CSS tak akan mengurangi kecepatan blog anda layaknya javascript yang agak berat.

Langkah-Langkah Membuat Modal Box Pure CSS

1. Salin HTML Berikut, lalu pastekan pada bagian Blog yang akan dipasangkan tombol
<!-- Tombol Modal -->
<a href="#openModal" class="modalBtn">Buka Modal</a>
<!-- Modal Box -->
  <div id="openModal" class="modalBox">
      <div>
         <a href="#close" title="Close" class="close">x</a>
         <h2>Modal</h2>
         <p>BLABLABLABLA, INI ADALAH ISI</p>
       </div>
   </div>
2. Salin juga CSS dibawah ini lalu pastekan dalam tag style.
.modalBtn {
 background: royalBlue;
 color: #fff;
 padding: 10px 15px;
 border-radius: 3px;
 overflow: hidden;
 display: inline-block;
}
.modalBox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 100ms ease-in;
    -moz-transition: opacity 100ms ease-in;
    transition: opacity 100ms ease-in;
    pointer-events: none;
}
.modalBox:target {
    opacity:1;
    pointer-events: auto;
}
.modalBox > div {
    max-width: 800px;
    width: 90%;
    max-height: 100vw;
    height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 20px;
    transform: translate(-50%, -50%);
    overflow: auto;
    border-radius: 3px;
    background: #fff;
    color: #000;
}
.close {
    position: absolute;
    top: 20px;
    right: 20px;
}
3. Pada Modal box ini Admin membuatnya dengan memanfaatkan elemen anchor yang disertai tautan yang tautan atau href tersebut akan mengarah ke id yang telah disiapkan sebagai tempat box anda. Saat tautan yang dibuat jadi tombol itu ditekan, maka box secara otomatis akan terbuka.

Sekian Cara Membuat Modal Box Pure CSS, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar

Komentar


EmoticonEmoticon