 |
| contoh tampilan modal |
Contohnya cobalah klik tombol Modal dibawah ini:
×
Halo selamat datang di halaman blog editblogtema dan Saya Anissa mengajak kalian membaca halaman ini..halaman tempat kita belajar HTML, CSS, dan JavaScript untuk blogger
...Halaman yang akan bercerita apa adanya perihal koding dasar, teknologi, paradox dan kehidupan di sekitar kita...
Halo selamat datang di halaman blog editblogtema dan Saya Anissa mengajak kalian membaca halaman ini..halaman tempat kita belajar HTML, CSS, dan JavaScript untuk blogger...Halaman yang akan bercerita apa adanya perihal koding dasar, teknologi, paradox dan kehidupan di sekitar kita...
Cara penerapannya sama dengan tutorial yang saya berikan pada artikel artikel saya yang telah saya posting sebelumnya di halaman blog ini, yakni meletakan kode HTMLnya pada opsi penulisan "HTML" setelah tulisan pada ospi "compose".
Kodenya persis sebagai berikut:
<style>Save tema sebelum kembali ke mode penulisan "compose".
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<!-- Trigger/Open The Modal -->
<center><button id="myBtn">Buka Modal</button></center>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<img alt="Avatar" class="avatar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivkwesNMcTj6OorGinZFKkhjy8uHI5L34w2CM6uwBs5VbT6MSoS1PAylGZpSfYn6a5WjGR8X0HQFhDl4MnVf0MfTZtNmbHnuGwLrs4pLoghmoX56YYbUUBwSo2nr2p4BsIyKqs2KUJK3o/s85/Adobe_20190929_141236.png" />
<p>Halo selamat datang di halaman blog editblogtema dan Saya Anissa mengajak kalian membaca halaman ini..halaman tempat kita belajar HTML, CSS, dan JavaScript untuk blogger</p>...<p>Halaman yang akan bercerita apa adanya perihal koding dasar, teknologi, paradox dan kehidupan di sekitar kita...</p>
</div>
</div>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
emang lebih simple dan iteractive kalau pake modal, saya juga sering pake ginian
BalasHapusMas kok saya pake modal bostrap di taruh di postingan ga bisa kenapa ya mas
BalasHapusBostrap memiliki beberapa aturan, yang kalau di jelasin disini terlalu panjang...
Hapus