使用window.onclick隐藏div —很复杂

Question

PLEASE NOTE: this is a javascript question even though the code here is in PHP. WARNING: long explanation coming up :-)

I have a PHP while loop which returns a variable number of rows from a MYSQL set. Included in each row of SQL data, there is a url for a googlemaps iframe, which is dynamically assigned to a modal popup window. The problem comes from the fact that I have to generate the javascript code to open and close each modal popup dynamically; so there is a substantial amount of javascript in the form of PHP echo (something I hate to do, but in this case, it seemed like the best option). Here is the code I have:

$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();
    ?>  

So as I mentioned in the comment, the open modal window part works perfectly because it can easily target the correct dive by id (eg 'modal_1', 'modal_2' etc.). However, when I click outside the window, only the LAST instance closes; any others that are there remain open and I have to reload the page to close them. I know that this is because the event.target will get reset with each PHP loop, and by the time the page is generated, it will only apply to the last instance.

My first thought was to put a function outside of the PHP loop which hides all divs of class modal , but then that would be triggered each time the user clicked anywhere on the page, and therefore, would also hide the div when the user clicks on the link to open it. So as far as I can tell, I have to keep this function inside my PHP loop too.

As such, I need to somehow tailor the javascript so that each generated function(event) will only be triggered if the associated div (by ID... 'modal_n') is shown. Beyond that, I suppose that it could simply hide all divs of class 'modal' rather than targeting the specific div which is visible (although I would prefer a method which targeted only that specific div).

I have tried my best to explain the problem clearly. As always, I would be very grateful for any help from the experts!

Answer 1

Check the count of open modal windows in this function:

// 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
         }
       }
    }   
}

This way your function will not run unless there is a minimum of 1 modal window open on your page.