It looks like you're new here. If you want to get involved, click one of these buttons!
<!DOCTYPE html>
<html>
<head>
<title>Membuat modal dialog dengan JQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<style>
body{
background: #ecf0f1;
font-family: sans-serif;
font-size: 11pt;
}
#modal-kotak{
margin:15% 30% 30% 40%;
position: absolute;
min-width: 200px;
position:fixed;
z-index:1002;
display: none;
background: white;
}
#isi_modal{
font-size: 11pt;
padding: 20px;
height: 80%;
}
#close{
background: #fff;
font-weight: bold;
}
#tombol-tutup{
background: #e74c3c;
float : right;
}
#tombol-tutup,#tombol{
height: 30px;
color: #fff;
border: 0px;
}
#bg{
opacity:.60;
position: absolute;
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
opacity: 0.6;
}
#tombol{
background: #e74c3c;
}
</style>
<body>
<center><h1>Membuat modal dialog dengan JQuery</h1></center>
<button id="tombol">KLIK SAYA !!</button>
KLIK TOMBOL UNTUK MENAMPILKAN MODAL DIALOG
<div id="bg"></div>
<div id="modal-kotak">
<div id="close">
<button id="tombol-tutup">X</button>
</div>
<div id="isi_modal">
ISI
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#tombol').click(function(){
$('#modal-kotak , #bg').fadeIn("fast");
});
$('#tombol-tutup').click(function(){
$('#modal-kotak , #bg').fadeOut("fast");
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Membuat modal dialog dengan JQuery </title>
<!-- <script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
</head>
<style>
body{
background: #ecf0f1;
font-family: sans-serif;
font-size: 11pt;
}
#modal-kotak{
margin:15% 30% 30% 40%;
position: absolute;
min-width: 200px;
position:fixed;
z-index:1002;
display: none;
background: white;
}
#isi_modal{
font-size: 11pt;
padding: 20px;
height: 80%;
}
#close{
background: #fff;
font-weight: bold;
}
#tombol-tutup{
background: #e74c3c;
float : right;
}
#tombol-tutup,#tombol{
height: 30px;
color: #fff;
border: 0px;
}
#bg{
opacity:.60;
position: absolute;
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
opacity: 0.6;
}
#tombol{
background: #e74c3c;
}
</style>
<body>
<center><h1>Membuat modal dialog dengan JQuery </h1></center>
<table border="1">
<tr>
<th>KLIK TOMBOL UNTUK MENAMPILKAN MODAL DIALOG</th>
</tr>
<?php
for ($i=1; $i<=3 ; $i++){
?>
<tr>
<td>
<button id="tombol"><?php echo $i.". "; ?>KLIK SAYA !!</button>
<div id="bg"></div>
<div id="modal-kotak">
<div id="close">
<button id="tombol-tutup">X</button>
</div>
<div id="isi_modal">
ISI <?php echo " ".$i; ?>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#tombol').click(function(){
$('#modal-kotak , #bg').fadeIn("fast");
});
$('#tombol-tutup').click(function(){
$('#modal-kotak , #bg').fadeOut("fast");
});
});
</script>
</td>
</tr>
<?php
}
?>
</table>
</body>
</html>
Comments
soalnya ada di dalam loop.
id="tombol"
id="bg"
id="modal-kotak"
id="tombol-tutup"
id="isi_modal"
$('#tombol').click(function(){...});
cuma akan dilekatkan di element dgn ID "tombol" pertama yg ditemukan.
kalo mau pake rujukan yg bisa kembar, pake CLASS, bukan ID
dan itu pun ndak semua harus di ulang.
bg itu cukup ada 1.
kalo pake alur elo serba salah ...
kalo ID dibedakan, CSS elo melekat ke ID.
kalo pake CLASS, di koding dialog elo ndak menyebut element mana yg berelasi dgn event nya.
kalo pake CLASS, ndak perlu koding nya diulang-ulang.
ya emang harus diubah ...
Thanks pencerahanya suhu. Masih awam bgt sama javascript mesti banyak belajar lg