Question

我尝试做一个弹出窗口，当我在html中执行我的js时，它可以正常工作，但是当我尝试将我的html的js分隔时，我的js文件不起作用，我也不知道为什么。。我不知道问题是否出在我如何适应我的js或我的js如何链接如果有人可以帮助，那就太好了！

这是我的代码，如果您还有其他需要，请问我！：

.popup2{z-index: 3;
    display: none;
    padding-top: 100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.82);
}

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Nejma Hamadi</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="vendor/bootstrap/css/styles.css" rel="stylesheet">
    <link href="vendor/bootstrap/css/stylesGallery.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/scrolling-nav.css" rel="stylesheet">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

</head>

<body id="page-top">


    <section id="portfolio2">

        
        <img src="img/img2.jpg" id="img1">

        <div id="id02" class="popup2">
            <div>
                <span class="close">&times;</span>
                <img src="img/img3.jpg" alt="Avatar" style="width:30%" id="img001">
                <img src="img/img3.jpg" alt="Avatar" style="width:30%">
                <img src="img/img3.jpg" alt="Avatar" style="width:30%">
            </div>
        </div>


    </section>










    

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>

    <!-- Custom JavaScript for this theme -->
    <script src="js/scrolling-nav.js"></script>
    <!--<script src="js/popup.js"></script>-->
    <script src="js/popup2.js"></script>
    <script src="js/popupVideo.js"></script>


</body>

</html>

{{1}}

Answer 1

在您的HTML中，您将popup2用作类名，而不是ID！因此，您应该用

替换var modal = document.getElementById('popup2');

var modal = document.getElementsByClassName('popup2')[0];

另一件事：确保此代码在HTML加载后运行，否则它将返回未定义。为此，请将代码包装在其中：

document.onload = function() {
  var modal = document.getElementsByClassName('popup2')[0];
  //your code here
}

Answer 2

您可以使用jQuery

$("#popup").hide(); //hidden in start
$("#openPopup").on("click",function(){
  $("#popup").show();
});
$("#closePopup").on("click",function(){
  $("#popup").hide();
});

请参阅CodePen Demo

控制台日志返回null

2 个答案: