November 22, 2019

CARA MEMBUAT MODAL PADA HALAMAN BLOGGER

contoh tampilan modal
contoh tampilan modal
Kalian jangan berfikir saya ini sebagai ahli keuangan ya...modal yang saya maksudkan tidak jauh dari beberapa rumpun kode kode HTML, CSS dan bahkan JavaScript yang di terapkan untuk menghasilkan sebuah "lightbox" dapat dimanfaatkan menarik atau mengalihkan perhatian pembaca terhadap sesuatu "pesan" yang ingin kita sampaikan dengan cara mengajak pembaca mengklik sebuah tombol dan jika mereka mengklik karena ingin tahu, maka pesanpun akan "tersampaikan"

Contohnya cobalah klik tombol Modal dibawah ini:


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>
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">&times;</span>
<img alt="Avatar" class="avatar" src="https://2.bp.blogspot.com/-86VHj_cj2pw/XZBZhyREgOI/AAAAAAAACiM/dTR2GTI4D-Uc2YHlQJjvs2vVWPaF1OutQCK4BGAYYCw/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>
Save tema sebelum kembali ke mode penulisan "compose".

I am a student of Senior High School (SMA) I am living in Bandar Lampung, Selalu tertarik dengan HTML, sedang belajar Javascript, python dan C++

1 comment:

  1. emang lebih simple dan iteractive kalau pake modal, saya juga sering pake ginian

    ReplyDelete