为每个用户显示JQuery弹出窗口

下面是我当前的代码TechHunter。当我点击Yes按钮时，什么都没有发生，弹出窗口看起来也没有CSS格式

<?php do { ?>
<div data-userid="<?php echo $row_users['id']; ?>" class="userTableBody">
    <div id="idRow"><?php echo $row_users['id']; ?></div>
    <div id="usernameRow"><?php echo $row_users['username']; ?></div>
    <div id="useremailRow"><a href="mailto:someone@example.com"><?php echo $row_users['email']; ?></a></div>
    <div id="actionRow"><a href="#" class="toPopupButton actionButton">Delete</a></div>
</div> 
<?php } while ($row_users = mysql_fetch_assoc($users)); ?>

<div id="dialog-confirm" title="Delete user?">
    <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Are you sure you want to delete this user?</p>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.js"> </script>
<script type="text/javascript" src="../include/js/script.js"></script>

---

我在这里遗漏了什么吗？

有许多元素与此选择器匹配：

法代因（0500）

您需要指定要显示哪一个

你可以这样做：

function loadPopup($elem) { 
        if(popupStatus == 0) { // if value is 0, show popup
            closeloading(); // fadeout loading
            $elem.closest('.userTableBody').next("#toPopup").fadeIn(0500); // fadein popup div
            $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
            $("#backgroundPopup").fadeIn(0001); 
            popupStatus = 1; // and set value to 1
        }   
    }

在单击处理程序中，更改

loadPopup（）；//功能显示弹出窗口

到

loadPopup（$（this））；//功能显示弹出窗口

并将loadPopup（）更改为如下内容：

function loadPopup($elem) { 
        if(popupStatus == 0) { // if value is 0, show popup
            closeloading(); // fadeout loading
            $elem.closest('.userTableBody').next("#toPopup").fadeIn(0500); // fadein popup div
            $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
            $("#backgroundPopup").fadeIn(0001); 
            popupStatus = 1; // and set value to 1
        }   
    }

---

不过，我建议您对代码进行一点重构。为了符合标准，元素Id应该是唯一的。您可以向它们添加类以选择它们。

这永远不会起作用，因为您在php循环中生成了多个具有相同ID的元素。将所有内容转换为类或基于用户ID的元素ID

<?php do { ?>
        <div data-userid="<?php echo $row_users['id']; ?>" class="userTableBody">
            <div class="idRow"><?php echo $row_users['id']; ?></div>
            <div class="usernameRow"><?php echo $row_users['username']; ?></div>
            <div class="useremailRow"><a href="mailto:someone@example.com"><?php echo $row_users['email']; ?></a></div>

            <div class="actionRow"><a href="#" class="toPopupButton actionButton">Delete</a></div>
        </div> 


            <!-- Popup window -->
        <div class="toPopup"> 
            <div class="close"></div>
            <span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
            <div class="popup_content">
            <p>Are you sure you want to delete this user?</p>
            <a href="action/deleteUser.php?id=<?php echo $row_users['id']; ?>">Yes</a>


            </div> <!--your content end-->
        </div> <!--toPopup end-->

    <?php } while ($row_users = mysql_fetch_assoc($users)); ?>

按Esc键关闭
是否确实要删除此用户

但我也建议使用jQueryUI对话框动态生成弹出窗口，这将使您的代码更干净。在这里拉小提琴：

---

您是指$（“a.topopup”）。单击（function（）事件？（将#替换为a。）？是的，请更改名为toPopup或类toPopup的ID，可能会变得非常混乱这正是我所需要的，但是当我单击“是”按钮时，什么都没有发生。另一件事是弹出窗口设计混乱，它没有显示像你在jsfiddle.net上所显示的设计。有什么建议吗？你能帮我吗？我已经在同样的事情再次发生。这是正确的吗？编辑你的帖子并添加你的新修改，这样我就可以看到。你还需要包括jqueryui cssI更新了上述代码并添加了我当前使用的代码。请告诉我需要更改的内容。谢谢！