Pop up modal pada website ? mungkin sudah banyak yah, sudah tidak asing lagi bagi web designer dalam membuat tampilan pop pada website, atau gambar, nah kali ini saya akan membahas tentang Cara Mudah Membuat Pop Up Modal Menggunakan Css W3C
sebelum-belumnya saya sudah membahas tentang pembuatan menu dropdown menggunakan W3C dan membuat list menggunakan W3C, oke langsung saja kita memulainya, dalam pembuatan modal popu up teman teman bisa menggantikan text menjadi sebuah gambar, ataupun mengganti menjadi sebuah video, sesuai dengan kebutuhan dari teman teman, teman-teman bisa salinkan scriptnya dibawah sini:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-indigo"> KLIK ME </button>
<!-- The Modal -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-animate-left">
<header class="w3-container w3-pink">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<h2> Dumet School </h2>
</header>
<div class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<h1> How About Dumet School </h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi enim, nesciunt omnis illum, laudantium beatae fugiat sapiente ratione minima totam ullam itaque, ipsum ipsam alias! Id dolore, hic dolorum tenetur. </p>
</div>
<footer class="w3-container w3-pink">
<p> Terbaik dan Nomor 1 </p>
</footer>
</div>
</div>
</body>
Jika sudah coba save dan jalankan, cukup mudah bukan untuk membuat sebuah pop up tidak perlu banyak script yang dituliskan, oke sekian tutorial tentang Cara Mudah Membuat Pop Up Modal Menggunakan Css W3C, sampai bertemu diartikel selanjutnya dan sampai jumpa.
#KeepLearn
#IsmetMA