时间戳

首页 > 解决方案 > 我正在努力获得从不同按钮打开的多个模式

javascript - 我正在努力获得从不同按钮打开的多个模式

问题描述

！更新代码！我最近正在尝试学习 html/css 来编写网站。我一直在关注多个教程，但由于某种原因，我的模式无法正常工作。打开/关闭模式的按钮不起作用。如果有人可以提供任何帮助，将不胜感激！

下面我包含了我的 html 文件、样式表和 javascript 文件。

索引.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script src="https://kit.fontawesome.com/935b67cf83.js" crossorigin="anonymous"></script>


    <script src="JS.js"></script> <!-- used to link to javascript-->


    <title>yo</title>
</head>


<body>



    <section class="flex" id="portfolio">

        <h1>
            PROJECTS
            <!--- <div class="horizontalLine" </div> --->
        </h1>



        <div class="gallery">

            <div class="projectBox">
                <img src="images/merseyTrains.png" />
                <div class="span">
                    <p1>MerseyTrainsLive</p1>
                    <p2>Android/Java</p2>

                    <button class="modal-open" data-target="#trainModal">Open Modal 1</button>
                    <!--- <a class="btn" id="TrainBtn" href="#">LEARN MORE</a>
                        --->

                </div>
            </div>


            <div class="projectBox">
                <img src="images/merseyTrains.png" />
                <div class="span">
                    <p1>MerseyTrainsLive</p1>
                    <p2>Android/Java</p2>

                    <button class="modal-open" data-target="#project2Modal">Open Modal 2</button>

                    <!---
                    <a class="btn" id="Project2Btn" href="#">LEARN MORE</a> --->
                </div>
            </div>


            <div class="projectBox">
                <img src="images/merseyTrains.png" />
                <div class="span">
                    <p1>MerseyTrainsLive</p1>
                    <p2>Android/Java</p2>

                    <button class="modal-open" data-target="#project3Modal">Open Modal 3</button>



                </div>

            </div>



        </div>



    </section>


    <!--pop-ups, bg-modal means background-->
    <div class="modal" id="trainModal">
        <div class="modal-content">
            <div class="modal-header">

                <img src="images/merseyTrains.png" />

                <button class="modal-close" data-target="#trainModal">
                    &times;
                </button>

                <h2> MerseyTrainsLive</h2>
            </div>

            <div class="modal-body">
                <p> idem espum </p>

            </div>

        </div>

    </div>


    <div class="modal" id="project2Modal">
        <div class="modal-content">
            <div class="modal-header">

                <img src="images/merseyTrains.png" />

                <button class="modal-close" data-target="#project2Modal">
                    &times;
                </button>

                <h2> project 2</h2>
            </div>

            <div class="modal-body">
                <p> idem espum 2 </p>

            </div>

        </div>

    </div>

    <div class="modal" id="project3Modal">
        <div class="modal-content">
            <div class="modal-header">

                <img src="images/merseyTrains.png" />

                <button class="modal-close" data-target="#project3Modal">
                    &times;
                </button>

                <h2> project 3</h2>
            </div>

            <div class="modal-body">
                <p> idem espum 3 </p>

            </div>

        </div>

    </div>


    <div id="overlay"> </div>



</body>


</html>

样式.css

body {
}

h1 {
    font-size: 40px; 
    text-align: center;

}

.horizontalLine {
    border-top: 5px solid black;
    width: 100px;
    margin: auto

}


.gallery {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center; /*makes individual boxes centered*/
}
.gallery img {
    height: 300px;
    width: 300px; 
}

.gallery .projectBox {
    width: 300px;
    position: relative;
    display: inline-block;
    /*margin: 10px; /*can be used to make the photos spaced out*/
}


.gallery .projectBox img {
    width: 100%;
    border: 4px solid black;
    transition-duration: 0.5s;
    opacity: 1; 
}

/*when hover over image, the image disappears*/
.gallery .projectBox:hover img {
    opacity: 0;
}

.gallery .projectBox .span {
    text-align: center;
    display: none;
    position: absolute;
    top: 50px;
    left: 50px;
    right: 50px;

}

.gallery .projectBox .span p1 {
    margin: auto;
    font-size: 24px;
    line-height: 40px;
    padding: 20px;
}

.gallery .projectBox .span p2 {
    margin: auto;
    font-size: 16px;
    line-height: 40px;
}

.gallery .projectBox:hover .span {
    opacity: 1; 
    display: block;

}


.gallery .projectBox .span a {
    
    text-decoration: none;
}


/*modal open buttons*/
.gallery .projectBox .span .modal-open {
    display: flex; /*makes layout nice :) */
    width: 150px;
    padding: 10px; /*how far the lines of button are from text*/
    margin: 30px auto;
    color: black;
    font-size: 20px;
    outline: none;
    border: 2px solid #f44336;
    background: transparent;
    cursor: pointer;
}

.gallery .projectBox .span .modal-open:hover {
    color: white;
    background: #f44336;
}





/* popups */
.modal {

    width: 60%;
    height: 60%;
    position: fixed;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: 2; /*so appears on top of overlay*/
    text-align: center;
    background-color: white;
    display: none;
}

/*modal close close button*/
.modal-close {
    background-color: transparent;
    border: none;
    font-size: 1.5rem;
}

.modal.active {
    
    display: flex; 
    
}

.modal .modal-content {
    display: flex; 
    border-radius: 4px; 
    position: relative; /*lets the .close position itself according to content*/
}

/*image for top of modal*/
.modal .modal-content img {
    height: 100px;
    width: 100px;
    padding: 20px;
}

.modal .modal-header .modal-close {
    position: absolute;
    top: 5px;
    right: 14px;
    font-size: 42px;
    cursor: pointer;
    border-radius: 4px;
}

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
}

.overlay.active {
    display: block;
}

JS.js

const btns = document.querySelectorAll(".modal-open");
const close_btns = document.querySelectorAll(".modal-close");
const overlay = document.getElementById("overlay");

btns.forEach((btn) => {
    const target = btn.dataset.target;
    btn.addEventListener("click", () => {
        document.querySelector(target).classList.add("active");
        overlay.classList.add("active");
    })
})

close_btns.forEach((btn) => {
    btn.addEventListener("click", () => {
        document.querySelector(btn.dataset.target).classList.remove("active");
        overlay.classList.remove("active");
    })
})

window.onclick = (e) => {
    if (e.target == overlay) {
        const modals = document.querySelectorAll(".modal");
        modals.forEach((modal) => modal.classList.remove("active"));
        overlay.classList.remove("active");
    }
}

下面是网站页面的截图

在此处输入图像描述

当我将鼠标悬停在 projectBoxes 上时，它会显示有关项目的信息，以及用于打开有关项目的更多信息的按钮（以模式显示）

在此处输入图像描述

标签： javascripthtmljquerycss

解决方案

首先，让我们更正 HTML 按钮以触发模态编号 3。

<button class="modal-open" data-target="#project3Modal">Open Modal 3</button>

注意“data-target”属性的变化。此属性的值应指向相应模式的“id”属性（根据 JS 实现）。

接下来，为了选择overlay <div>，让我们使用document.getElementById方法。由于您的 HTML 中只有一个id="overlay"，因此在我个人看来，选择具有唯一 ID 的元素是一种很好的做法。

所以让我们将JS中的代码更改如下：

const overlay = document.getElementById("overlay");

btns.forEach((btn) => {
  const target = btn.dataset.target; // Declaring target 
  btn.addEventListener("click", () => {
    document.querySelector(target).classList.add("active");
    overlay.classList.add("active");
  });
});

通过上述两个更改，一切都应该正常工作。如果没有，请告诉我，以便我进一步为您提供帮助。如果您需要清楚上述代码，请告诉我。:)

推荐阅读