Поле jQuery popup, работающее в цикле while

У меня есть всплывающее окно сообщения, работающее в цикле while, но в поле popup address одинаковый адрес отображается для всех записей.

Может ли кто-нибудь сказать мне, что я делаю неправильно?

Сценарий Jtery Jtery

<script type="text/javascript"> $(document).ready(function() { $('#button').click(function(e) { $('#modal').reveal({ animation: 'fade', animationspeed: 600, closeonbackgroundclick: true, dismissmodalclass: 'close' }); return false; }); }); </script> <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> 

Всплывающее окно Отображение одного и того же адреса в каждой строке таблицы

Проблема в том, что вы используете один и тот же идентификатор во всплывающем окне для каждого div. Поэтому, независимо от того, какой код вы вызываете для открытия всплывающего окна, он всегда откроет первое всплывающее окно. Вам нужно что-то вроде этого:

 <script type="text/javascript"> $(document).ready(function() { $('.button').click(function(e) { id = $(this).attr('id').substr(3); //alert(id); //uncomment this line to check ID's are coming through fine. $('#modal' + id).reveal({ animation: 'fade', animationspeed: 600, closeonbackgroundclick: true, dismissmodalclass: 'close' }); return false; }); }); </script> <table> <?php $i = 0; $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="#" id="btn<?php echo $i; ?>" 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 class="modal" id="modal<?php echo $i++; ?>"> <div class="heading"> Sign Up! Customer's Address </div> <div class="content"> <p><?php echo $row1['address']; ?></p> </div> </div> <Popup End> <?php }?> </table> в <script type="text/javascript"> $(document).ready(function() { $('.button').click(function(e) { id = $(this).attr('id').substr(3); //alert(id); //uncomment this line to check ID's are coming through fine. $('#modal' + id).reveal({ animation: 'fade', animationspeed: 600, closeonbackgroundclick: true, dismissmodalclass: 'close' }); return false; }); }); </script> <table> <?php $i = 0; $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="#" id="btn<?php echo $i; ?>" 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 class="modal" id="modal<?php echo $i++; ?>"> <div class="heading"> Sign Up! Customer's Address </div> <div class="content"> <p><?php echo $row1['address']; ?></p> </div> </div> <Popup End> <?php }?> </table> 

Обратите внимание на изменение другого div от ID до класса. Вы должны использовать идентификатор только один раз на странице. Если вы повторно используете что-то более одного раза, это должен быть класс.

Также вы неправильно маркировали свои теги. Это проблема Javascript / HTML, а не PHP.