Question

我正在尝试实现一种始终显示不同信息的模态。这取决于您单击的名称。此刻他总是展示最新链接的模式。

这里我打印出不同的信息。对于每一行，我想要一个特定的模态

PHP

foreach ($badgesNotifications as $notifications) {

  echo "<p>Congratulations! You've earned the <a href='#' data-reveal-id='myModal'>" .  $notifications['challenge_badge_title'] ." badge</a></p>";
  echo "<div id='myModal' class='reveal-modal' data-reveal>
          <h2>" .  $notifications['challenge_title'] . "</h2>
          <p class='lead'>Your couch.  It is mine.</p>
          <p>" . $notifications['challenge_description'] . " </p>
          <a class='close-reveal-modal'>&#215;</a>
       </div>";
}
?>

我尝试用链接中的$notifications['challenge_badge_title']替换'myModal'和邮件的ID但是他没有打开模态。

标题总是不同所以我认为他会打开另一个窗口。 id不必是必需的“MyModal”，因为它正在使用其他单词。

我还尝试将数据放在不同的数组中，因为它们互相覆盖。但这也无法解决我的问题。

public function BadgeNotifications($user_id)
    {
        $db = new Db();

        $select = "SELECT

                            c.challenge_id,
                            c.challenge_title,
                            c.challenge_target,
                            c.challenge_description,
                            c.challenge_badge_img,
                            c.challenge_badge_title,
                            p.challenge_id,
                            p.user_id,
                            p.challenge_progress


                        FROM (tblchallenges c INNER JOIN tblchallenges_progress p ON c.challenge_id = p.challenge_id) WHERE p.user_id = " . $user_id . " ";


    $result = $db->conn->query($select);
        $result_count = mysqli_num_rows($result);
        $result_array = array();


        for($i = 0; $i < $result_count; $i++)
            {
                $result_data = mysqli_fetch_assoc($result);
                $result_array[$i]["challenge_id"] = $result_data["challenge_id"];
                $result_array[$i]["challenge_title"] = $result_data["challenge_title"];
                $result_array[$i]["challenge_description"] = $result_data["challenge_description"];
                $result_array[$i]["challenge_badge_title"] = $result_data["challenge_badge_title"];
            }
        return $result_array;

    }

Answer 1

您的代码似乎有错误：

echo "<div id='myModal' class='reveal-modal' data-reveal>";

您应该为每个模态提供唯一的ID。当ID被多次使用时，正确编写的Javascript应用程序会失效，因为CSS / JS规范说您只能使用一次ID。

下面的解决方案介绍了一个迭代器$i，您可以使用它来使每个回显元素都是唯一的。

你会注意到模态ID现在在它的末尾有一个数字，（myModal0，myModal1等）。

foreach ($badgesNotifications as $i => $notifications)
                            {

                                  echo "<p>Congratulations! You've earned the <a href='#' data-reveal-id='myModa" . $i . "l'>" .  $notifications['challenge_badge_title'] ." badge</a></p>";

                                  echo "<div id='myModal" . $i . "' class='reveal-modal' data-reveal>
                                        <h2>" .  $notifications['challenge_title'] . "</h2>
                                         <p class='lead'>Your couch.  It is mine.</p>
                                         <p>" . $notifications['challenge_description'] . " </p>
                                          <a class='close-reveal-modal'>&#215;</a>

                                        </div>";
                            }

                            ?>

使用foreach（）打开不同的模态对话框

1 个答案: