[ASK] Seputar JQuery Dialog

husnifaizal · February 2018

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.

labalaba · February 2018

ini aja pegangan elo :

di 1 (satu) halaman HTML, tidak boleh ada element yg punya ID kembar jika ID itu diniatkan akan dipergunakan sebagai rujukan.

jika dipaksakan, maka hanya element pertama yg ditemukan yg bakal dipake.

dari koding elo yg terakhir, setumpuk ID bakal kembar semua.
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 ...

<!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>
  <div id="bg"></div>
  <table border="1">
    <tr>
      <th>KLIK TOMBOL UNTUK MENAMPILKAN MODAL DIALOG</th>
    </tr>
    <?php
    for ($i=1; $i<=3 ; $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>

husnifaizal · February 2018

Dear labalaba..

Thanks pencerahanya suhu. Masih awam bgt sama javascript mesti banyak belajar lg

Howdy, Stranger!

Categories

[ASK] Seputar JQuery Dialog

Comments