Cara Membuat Pop Up Modal dengan W3.CSS

Keberhasilan datang kepada orang-orang yang menghargai waktu, teratur, fokus, menyelesaikan pekerjaan satu demi satu dengan keyakinan. Oke pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Pop Up Modal dengan W3.CSS.

Pop Up Modal adalah menu pop up yang berisikan itu bisa tentang gambar, deskripsi dari suatu konten atau yang lain nya tapi dengan cara masih tetap dalam halaman tersebut tanpa harus pindah ke halaman lain yang dapat memudahkan si pengguna atau tamu pada blog/website teman-teman. Kelebihannya juga menjadikan variasi dalam website kita sendiri. Oke berikut Cara Membuat Pop Up Modal dengan W3.CSS.

Pertama-tama, seperti biasa siapkan terlebih dahulu file index.html nya.

Kemudian, isi di bagian <head> link untuk menghubungi index dengan W3.CSS.

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

Setelah itu, isi di bagian <body> tag-tag seperti gambar di bawah.

<body class="w3-container">

<h2>W3.CSS Modal</h2>

<button onclick="document.getElementById('id01').style.display='block'" class="w3-btn">Klik disini!</button>

<div id="id01" class="w3-modal">
  <div class="w3-modal-content">
    <div class="w3-container">
      <span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">&times;</span>
      <p>Ini paragraf pada modal</p>
      <p>Ini paragraf pada modal</p>
    </div>
  </div>
</div>
            
</body>

Bagaimana teman-teman? cukup mudah bukan?

Sekian untuk tutorial kali ini tentang Cara Membuat Pop Up Modal dengan W3.CSS.

Semoga bermanfaat, terima kasih