Question

请注意：这是一个javascript问题，即使这里的代码是PHP。警告：很长的解释： - ）

我有一个PHP while循环，它从MYSQL集返回可变数量的行。包含在SQL数据的每一行中，有一个googlemaps iframe的url，它被动态分配给模式弹出窗口。问题来自于我必须生成javascript代码以动态打开和关闭每个模态弹出窗口;所以PHP回声形式有大量的javascript（我讨厌这样做，但在这种情况下，它似乎是最好的选择）。这是我的代码：

$sql .= " WHERE " . implode(" AND ", $where_clause); 
            $result = $conn->query($sql);
            $loopcount = 1; //enumerate each returned MYSQL row for popup variables

        if ($result->num_rows > 0) {
            // output data of each row
            while($row = $result->fetch_assoc()) {
                echo '<!--ENTRY:' . $loopcount . '-->';

            //START POPUP CODE FOR GOOGLEMAPS
                echo '<H1><span id="open_popup_' . $loopcount . '">' . $row["address"] . ',&nbsp;' . $row["city"] . '</span></H1>' . 

                '<div id="myModal_' . $loopcount . '" class="modal">' .
                    '<div class="modal-content"><iframe src="' . $row["map"] . '" width="600" height="450"></iframe></div>' . 
                    '</div>'; 

                echo '<script>
                    var modal_' . $loopcount . ' = document.getElementById(\'myModal_' . $loopcount . '\');
                    var popup_id_' . $loopcount . ' = document.getElementById("open_popup_' . $loopcount . '");

            // Open modal--THIS PART WORKS FINE
                popup_id_' . $loopcount . '.onclick = function() {
                    modal_' . $loopcount . '.style.display = "block";
                    }

            // Close modal onclick outside the modal--THIS PART DOES NOT WORK
                window.onclick = function(event) {
                    if (event.target == modal_' . $loopcount . ') {
                        modal_' . $loopcount . '.style.display = "none";
                        }
                    }
                </script>';

                $loopcount++; //INCREMENT LOOPCOUNT FOR EACH RETURNED ROW

                }
            } else {
                echo "0 results";
                }
        $conn->close();
    ?>

正如我在评论中提到的那样，开放式模态窗口部分可以完美地工作，因为它可以通过id轻松定位正确的潜水（例如'modal_1'，'modal_2'等）。但是，当我在窗口外单击时，只有LAST实例关闭;那里的任何其他人仍然保持开放，我必须重新加载页面才能关闭它们。我知道这是因为每个PHP循环都会重置event.target，并且在生成页面时，它只会应用于最后一个实例。

我的第一个想法是在PHP循环之外放置一个隐藏类modal的所有div的函数，但是每次用户点击页面上的任何地方时都会触发，因此，也会隐藏当用户点击链接打开它时的div。所以据我所知，我必须将此function保留在我的PHP循环中。

因此，我需要以某种方式定制javascript，以便只有在显示关联的div（通过ID ...'modal_n'）时才会触发每个生成的function(event)。除此之外，我认为它可以简单地隐藏类“模态”的所有div，而不是针对可见的特定div（尽管我更喜欢仅针对特定div的方法）。

我尽力清楚地解释这个问题。一如既往，我将非常感谢专家的帮助！

Answer 1

检查此功能中打开模态窗口的数量：

// Close modal onclick outside the modal
window.onclick = function(event) {
    if(event.target.className != "open_Modal"){
        var arr = document.getElementsByClassName("modal")
        var modal_count = 0; //Initialize Count
        for(var i = 0; i < arr.length; i++){
           if(arr[i].style.display == "block"){
              modal_count++; //Increase count for all modals with display: block
           }
        }
       if (modal_count > 0) //Run function only if modal_count is more than 0
       { 
         for(var i = 0; i < arr.length; i++){
           arr[i].style.display = "none"; 
           modal_count = 0; //Reset modal_count to 0 again
         }
       }
    }   
}

这样，除非页面上至少打开1个模态窗口，否则您的功能将无法运行。

用window.onclick隐藏divs，这很复杂

1 个答案: