Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
[ASK] Seputar JQuery Dialog
Dear master..
Saya mau tanya seputar JQuery Modal Dialog. Sebelumnya saya punya script seperti ini
<!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>
It works dan ga ada masalah. Lalu saya kembangkan menjadi bentuk tabel seperti ini :
<!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>
Yang terjadi hanya nomor 1 saja yang jalan dan itupun semua data keluar (tidak per baris). Apakah harus ditambah array ? Sorry saya pemula.
Mohon pencerahanya master supaya Dialog yang muncul bisa sesuai yg kita pilih.
Thanks.
1
3 Jawaban:
Sory master.. nambah dimananya ya ?? masih buta javascript :D
0
Jawaban Terpilih
Dear master..
Kasus ini sudah terjawab berkat bantuan formu sebelah. Terima kasih buat suhu yang sudah menjawab pertanyaan ini. Semoga bisa membantu yang lain juga. Berikut solusinya :
<!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: auto;
position: absolute;
top: 200px; left: 400px; bottom: 200px; right: 400px;
position: fixed;
min-width: 200px;
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>
<div id="bg"></div>
<table border="1">
<tr>
<th>KLIK TOMBOL UNTUK MENAMPILKAN MODAL DIALOG</th>
</tr>
<?php
for ($i=1; $i<=10 ; $i++){
?>
<tr>
<td>
<button class="tombol"><?php echo $i.". "; ?>KLIK SAYA !!</button>
<div class="modal-kotak">
<div class="close">
<button class="tombol-tutup">X</button>
</div>
<div class="isi_modal">
ISI <?php echo " ".$i; ?>
</div>
</div>
</td>
</tr>
<?php
}
?>
</table>
<script type="text/javascript">
$(document).ready(function(){
$('.tombol').click(function(){
$('#bg').fadeIn("fast");
$(this).next().fadeIn("fast");
});
$('.tombol-tutup').click(function(){
$('#bg').fadeOut("fast");
$(this).parent().parent().fadeOut("fast");
});
});
</script>
</body>
</html>
0