弹出一个带有php变量的javascript对话框

当我在PHP中使用一段时间时，如何能够弹出正确的javascript框。 代码如下：

while($result= mysql_fetch_array($data)){
    <tr class="<?php echo $style;?>">
        <td><?php echo $result['commissie'];?></td>
        <td class="small"><?php echo $result['volgorde'];?></td>
        <td class="small">
            <div id="dialog-overlay"></div>
                <div id="dialog-box">
                    <div class="dialog-content">
                        <h1>Verwijder van commissie: "<?php echo $result['commissie'];?>"</h1>                                              
                        <div id="dialog-message">
                            <p>Weet je zeker dat je <?php echo $result['commissie'];?>. <?php echo $result_achternaam;?> wilt verwijderen uit de commissie? Dit betekend dat het contactpersoon automatisch zal worden verwijdert uit het systeem.</p>
                        </div>
                        <a href="../checks/delete_commissie.php?id=<?php echo $result['id'];?>" class="button">Ja</a>
                        <a href="#" class="button_no">Nee</a>
                        <div class="clear"></div>
                    </div>
                </div>
             </div> 
             <a href="javascript:popup('<?php echo $result['id'];?>')"><img src="../../images/delete.png"/></a>
         </td>
    </tr>
<?php }//CLOSE THE WHILE

---

问题是，当我显示一个对话框时，系统总是会弹出第一个对话框，因为在WHILE的表中，您的问题似乎是由于WHILE循环中生成的重复选择器造成的。ID属性必须是唯一的

<div id="dialog-overlay"></div>
<div id="dialog-box">

Javascript

var dialogBox = 1;

$(document).ready(function () {

    $('a.button_no').click(function (e) {
        e.preventDefault();
        dialogBox = $(this).data('buttonID');   
        $('#dialog-overlay' + dialogBox + ', #dialog-box' + dialogBox).hide();       
    });

    $(window).resize(function () {
       if (!$('#dialog-box' + dialogBox).is(':hidden')) popup();       
    }); 
});

function popup() {

    var maskHeight = $(document).height();  
    var maskWidth = $(window).width();

    var dialogTop =  (maskHeight/3) - ($('#dialog-box' + dialogBox).height());  
    var dialogLeft = (maskWidth/2) - ($('#dialog-box' + dialogBox).width()/2); 

    $('#dialog-overlay' + dialogBox).css({height:maskHeight, width:maskWidth}).show();
    $('#dialog-box' + dialogBox).css({top:dialogTop, left:dialogLeft}).show();           
}

---

查看代码的功能，似乎可以通过使用事件处理程序调用函数（使用上下文

this

关键字）更轻松地实现它。显然，您需要使用类而不是ID，正如@PassKit所提到的

$("a").click(function(e){
e.preventDefault();
dialog = $(this).prev(); // will get the .dialog_overlay div
// now you can manipulate the dialog using `dialog` as a reference point. 
//e.g dialog.find(".dialog_box").show() etc...
});

---

1.文档上的ID必须是唯一的。。。2.将变量传递到弹出窗口，而不接收/处理它。。。3.我建议您使用ajax获取弹出窗口的数据/html，您在while（）行中缺少了一个

？>

。

var dialogBox = 1;

$(document).ready(function () {

    $('a.button_no').click(function (e) {
        e.preventDefault();
        dialogBox = $(this).data('buttonID');   
        $('#dialog-overlay' + dialogBox + ', #dialog-box' + dialogBox).hide();       
    });

    $(window).resize(function () {
       if (!$('#dialog-box' + dialogBox).is(':hidden')) popup();       
    }); 
});

function popup() {

    var maskHeight = $(document).height();  
    var maskWidth = $(window).width();

    var dialogTop =  (maskHeight/3) - ($('#dialog-box' + dialogBox).height());  
    var dialogLeft = (maskWidth/2) - ($('#dialog-box' + dialogBox).width()/2); 

    $('#dialog-overlay' + dialogBox).css({height:maskHeight, width:maskWidth}).show();
    $('#dialog-box' + dialogBox).css({top:dialogTop, left:dialogLeft}).show();           
}

$("a").click(function(e){
e.preventDefault();
dialog = $(this).prev(); // will get the .dialog_overlay div
// now you can manipulate the dialog using `dialog` as a reference point. 
//e.g dialog.find(".dialog_box").show() etc...
});