[英]php jquery popup message box working in the while loop
php jquery彈出消息框在while循環中工作,但在顯示所有條目相同地址的彈出地址字段中,任何人都可以告訴我我在哪里做錯了,謝謝
HTML jQuery腳本
<script type="text/javascript">
$(document).ready(function() {
$('#button').click(function(e) {
$('#modal').reveal({
animation: 'fade',
animationspeed: 600,
closeonbackgroundclick: true,
dismissmodalclass: 'close'
});
return false;
});
});
</script>
HTML表格和PHP頁面
<table>
$query1=mysql_query("select * from customers order by id desc");
while($row1=mysql_fetch_array($result))
{
?>
<tr>
<td><div align="center"><?php echo $row1['firstname']; ?></div></td>
<td><div align="center"><?php echo $row1['lastname']; ?></div></td>
<td><div align="center"><?php echo $row1['dob']; ?></div></td>
<td><div align="center"><?php echo $row1['email']; ?></div></td>
<td><div align="center"><a href="#" class="button">Address</a></div></td>
<td><div align="center"><?php echo $row1['phone']; ?></div></td>
<td><div align="center"><?php echo $row1['country']; ?></div></td>
<td><div align="center"><?php echo $row1['city']; ?></div></td>
</tr>
<Popup Start>
<div id="modal">
<div id="heading">
Sign Up! Customer's Address
</div>
<div id="content">
<p><?php echo $row1['address']; ?></p>
</div>
</div>
<Popup End>
<?php }?>
</table>
在HTML中
將此行更改為:
<td><div align="center"><a href="#" id="button">Address</a></div></td>
這個:
<td><div align="center"><a href="#" class="button">Address</a></div></td>
&
將此行更改為:
<div id="modal">
這個:
<div class="modal">
使用Javascript:
$('.button').click(function(e) {
$(this).closest('tr').find('.modal:first').reveal({
animation: 'fade',
animationspeed: 600,
closeonbackgroundclick: true,
dismissmodalclass: 'close'
});
return false;
});
嘗試為所有這樣的按鈕提供唯一的ID
<td><div align="center"><a href="#" id="button_<?php echo $row1['id'];?>">
Address</a>
</div></td>
然后根據其按鈕的ID值應用彈出按鈕單擊,並像
<script type="text/javascript">
$(document).ready(function() {
$("input[id^='button']").click(function(e) {
$('#modal').reveal({
animation: 'fade',
animationspeed: 600,
closeonbackgroundclick: true,
dismissmodalclass: 'close'
});
return false;
});
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.