Cara Membuat Pop Up Iklan Menggunakan HTML

Tutorial Membuat Pop Up Iklan di HTML - Pada artikel sebelumnya sudah saya jelaskan terkait dengan pengertian dan fungsi Pop Up. Salah satu jenis Pop Up adalah Pop Up iklan. Pop Up iklan sering kita jumpai di website atau blog berita. Apabila kita sedang membaca berita lalu tiba-tiba muncul jendela layang maka bisa dikatakan bahwa itu adalah Pop Up iklan. Pop Up iklan biasanya memberikan suatu penawaran dimana pembaca disuruh untuk memilih ya dan tidak. Apabila memilih ya maka pembaca akan redirect ke konten iklannya. Apabila tidak maka Pop Up iklan akan menutup.
Untuk membuat Pop Up iklan kita membutuhkan HTML, CSS dan Javascript.
Membuat Pop Up iklan di HTML |
Untuk melihat tampilan Pop Up iklan yang akan kita buat silahkan klik pada tombol dibawah ini.
Jika sudah melihat tampilan Pop Up iklan, mari kita mulai tutorialnya.
Daftar Isi :
Alat dan Bahan
Cara Pembuatan
<html>
<style>
button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 20%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
.cancelbtn, .deletebtn {
float: left;
width: 50%;
}
.cancelbtn {
background-color: #ccc;
color: black;
}
.deletebtn {
background-color: #04AA6D;
}
.container {
padding: 16px;
text-align: center;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 25%;
top: 25%;
width: 50%;
height: 50%;
background-color: #474e5d;
padding-top: 10px;
}
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
border: 1px solid #888;
width: 80%;
height: 80%;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #f1f1f1;
}
.fontjudul{
font-size: 25px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #f44336;
cursor: pointer;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
@media screen and (max-width: 300px) {
.cancelbtn, .deletebtn {
width: 100%;
}
}
</style>
<center><button onclick="document.getElementById('id01').style.display='block'">Klik Disini!</button></center>
<div class="modal" id="id01">
<span class="close" onclick="document.getElementById('id01').style.display='none'" title="Close Modal">×</span>
<form action="/action_page.php" class="modal-content">
<div class="container">
<div class="fontjudul">Selamat Datang!</div>
<br />
<p>TutorialKomputer.net</p>
<p>Mau dapat info terupdate tutorial setiap hari dari web ini?</p>
<br />
<div class="clearfix">
<button class="cancelbtn" onclick="document.getElementById('id01').style.display='none'" type="button">Mau Aja!</button>
<button class="deletebtn" onclick="document.getElementById('id01').style.display='none'" type="button">Mau Banget!</button>
</div>
</div>
</form>
</div>
<script>
var modal = document.getElementById('id01');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</html>