Scrip Kotak Dialog Kosong HTML | Bisa Di Isi Sesuai Selera JS HTML CSS
Kotak Dialog Kosong maksud nya yaitu box yang bisa anda dsain dan anda isi sesuai yang anda inginkan, anda bisa meletakkan scrip PHP, Query Dll.
Contoh Sbb:
Contoh Sbb:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Popup</title>
<style>
body{
font-family: arial, verdana, sans-serif;
}
/* jwpopup box style */
.jwpopup {
display: none;
position: fixed;
z-index: 1;
padding-top: 110px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.7);
}
.jwpopup-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
max-width: 500px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
.jwpopup-head {
font-size: 10px;
padding: 1px ;
color: white;
}
.jwpopup-main {padding: 5px 16px;}
.jwpopup-foot {
font-size: 12px;
padding: .5px 16px;
color: #ffffff;
}
/* tambahkan efek animasi */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* style untuk tombol close */
.close {
margin-top: 5px;
color: white;
float: right;
font-size: 28px;
font-weight: bold;
color: #ccc;
margin-right: 10px;
}
.close:hover, .close:focus {
color: #FF0000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Membuat Popup Sederhana dengan Javacript dan CSS</h2>
<!-- trigger the jwpopup -->
<a href="javascript:void(0);" id="jwpopupLink">Klik</a>
<!-- jwpopup box -->
<div id="jwpopupBox" class="jwpopup">
<!-- jwpopup content -->
<div class="jwpopup-content">
<div class="jwpopup-head">
<span class="close">×</span>
<h5 style="color: black;">Atas</h5>
</div>
<div class="jwpopup-main">
<form>
isi
</form>
</div>
<div class="jwpopup-foot">
<div style="color: black;"><p> Bawah </p></div>
</div>
</div>
</div>
<script>
// untuk mendapatkan jwpopup
var jwpopup = document.getElementById('jwpopupBox');
// untuk mendapatkan link untuk membuka jwpopup
var mpLink = document.getElementById("jwpopupLink");
// untuk mendapatkan aksi elemen close
var close = document.getElementsByClassName("close")[0];
// membuka jwpopup ketika link di klik
mpLink.onclick = function() {
jwpopup.style.display = "block";
}
// membuka jwpopup ketika elemen di klik
close.onclick = function() {
jwpopup.style.display = "none";
}
// membuka jwpopup ketika user melakukan klik diluar area popup
window.onclick = function(event) {
if (event.target == jwpopup) {
jwpopup.style.display = "none";
}
}
</script>
</body>
</html>
Scrip Kotak Dialog Kosong HTML | Bisa Di Isi Sesuai Selera JS HTML CSS
Reviewed by ego oktafanda
on
March 06, 2018
Rating:
Reviewed by ego oktafanda
on
March 06, 2018
Rating:
No comments