Question

我正在尝试在单页应用程序网站上的PHP页面中实现一个模态窗口，但我无法让模态窗口起作用。

即使我有一个.js文件，我正在存储我的函数，我在PHP页面中有javascript，我正在尝试让模态窗口工作。我希望所有函数都在.js文件中，但我无法以任何方式工作。

PHP页面

这不是index.php，而是在初始页面加载后调用

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="myModal" class="modal">

    <!-- Modal content -->
        <div class="modal-content">
        <span class="close">&times;</span>
        <img id="popup_img" src="#">
         </div>

    </div>
    <div id="screenings">
        <?php
            $db = mysqli_connect("localhost", "root", "", "data");
            $sql = "SELECT * FROM screenings";
            $result = mysqli_query($db, $sql);
            while ($row = mysqli_fetch_array($result)){
                echo "<div id='img_div'>";
                    echo "<img id='img_screenings' class='modal_img' src='images/".$row['image']."' >";
                    //echo "<p>" .$row['text']."</p>";
                echo "</div>";
            }
        ?>
    </div>
    <script>
    // Get the modal
    var modal = document.getElementById('myModal');

   // Get the button that opens the modal
   //var btn = document.getElementsByClassName("modal_img");

   // Get the <span> element that closes the modal
   var span = document.getElementsByClassName("close")[0];

   $("img").on("click", function() {
    var source = ( $(this).attr("src") );
   //alert(source);
  //$('#modal_popup').text(source);
  $('#popup_img').prop('src', this.src);
  });

  // When the user clicks the button, open the modal 
  document.getElementById("img_screenings").onclick = function(){
  modal.style.display = "block";
   alert("hello");
   }

   // When the user clicks on <span> (x), close the modal
   span.onclick = function() {
    modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
     if (event.target == modal) {
    modal.style.display = "none";
    }
    }
    </script>
    </body>

模态窗口的CSS

我不认为这部分

有什么问题

.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
text-align: center;
}

/* Modal Content */
.modal-content {
    background-color: black;
    position: relative;
    margin: auto;
    padding: 50px 40px 50px 50px;
    display: inline-block;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    position: relative;
    left: 20px;
    bottom: 35px;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
}
.modal_img{
        cursor: pointer;
}

目前，我没有在浏览器控制台中收到任何错误，但模式窗口没有弹出。

Answer 1

使用$document.ready(function(){...})包装您的javascript代码可以解决问题。

Angular / PHP单页应用程序中的模态窗口不起作用

1 个答案: