Skip to content

Instantly share code, notes, and snippets.

@kazutorog

kazutorog/gist:33d91f7a9604e32f2c9d9c7143476537

Last active January 18, 2018 02:35
Show Gist options
  • Save kazutorog/33d91f7a9604e32f2c9d9c7143476537 to your computer and use it in GitHub Desktop.
Save kazutorog/33d91f7a9604e32f2c9d9c7143476537 to your computer and use it in GitHub Desktop.
Download ZIP
Why i can't click "Membuka POP UP Ke 2"
Raw
gistfile1.txt
<!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: 11px;
padding: 1px 16px;
color: white;
background: #006faa; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#006faa, #002c44); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#006faa, #002c44); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#006faa, #002c44); /* For Firefox 3.6 to 15 */
background: linear-gradient(#006faa, #002c44); /* Standard syntax */
}
.jwpopup-main {padding: 5px 16px;}
.jwpopup-foot {
font-size: 12px;
padding: .5px 16px;
color: #ffffff;
background: #006faa; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#006faa, #002c44); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#006faa, #002c44); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#006faa, #002c44); /* For Firefox 3.6 to 15 */
background: linear-gradient(#006faa, #002c44); /* Standard syntax */
}
/* 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: 7px;
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover, .close:focus {
color: #999999;
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">Membuka POP UP Ke 1</a>
<!-- jwpopup box -->
<div id="jwpopupBox" class="jwpopup">
<!-- jwpopup content -->
<div class="jwpopup-content">
<div class="jwpopup-head">
<span class="close">×</span>
<h2>[Popup Pertama] Popup dengan Javascript dan CSS</h2>
</div>
<div class="jwpopup-main">
<p>[Popup Content] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis maxime nobis quod veritatis facere velit cum optio obcaecati soluta ratione amet iusto nulla, expedita blanditiis tempora inventore tempore impedit itaque.</p>
</div>
<div class="jwpopup-foot">
<p>[Popup Footer] Creating popup using Javascript and CSS</p>
</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>
<p>
<!-- trigger the jwpopup -->
<a href="javascript:void(0);" id="jwpopupLink">Membuka POP UP Ke 2</a>
<!-- jwpopup box -->
<div id="jwpopupBox" class="jwpopup">
<!-- jwpopup content -->
<div class="jwpopup-content">
<div class="jwpopup-head">
<span class="close">×</span>
<h2>[Popup Kedua] Popup dengan Javascript dan CSS</h2>
</div>
<div class="jwpopup-main">
<p>[Popup Content] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis maxime nobis quod veritatis facere velit cum optio obcaecati soluta ratione amet iusto nulla, expedita blanditiis tempora inventore tempore impedit itaque.</p>
</div>
<div class="jwpopup-foot">
<p>[Popup Footer] Creating popup using Javascript and CSS</p>
</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>
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment