弹出模式出现在点击

Question

我有一个页面，上面有一堆卡片。 我希望在单击卡片时出现弹出窗口。 最终，我希望每张卡片的弹出窗口内容都不同，但现在我只想让弹出窗口正常工作。 我能够获得 javaScript 代码以与 getElementById 一起使用，但是这行不通，因为我有许多不同的卡。 有人可以帮我让这个 javascript 工作吗？

这是我的 HTML

<div class="cardContainer">
                <div class="trainingCard">
                    <div class="cardText"> 
                        <h1>How to fill out a time card</h1>
                        <p> To learn out how to fill out a time card, click this card to acess a digital training lesson!</p> 
                    </div>
                </div>

                <!-- next training card-->
                <div class="trainingCard">
                    <div class="cardText"> 
                        <h1>How to change labels</h1>
                        <p> To learn out replace the labels in a labeler machine, click this card to acess a digital training lesson!</p> 
                    </div>
                </div>
            <!-- next training card-->
                <div class="trainingCard">
                    <div class="cardText"> 
                        <h1>How to insert a trigger</h1>
                        <p> To learn how to insert a trigger when working on a liquid filling line, click this card to access a digital training lesson!</p> 
                    </div>
                </div>
            <!--end card container-->
            </div>


<div class="popUpModal" id=popUpModal>
    
    <div class="popUpContent">
        <div class="close">+</div>
        <h1 class="trainingPopUpHeader">How to Change Labels</h1>
        <div  class="trainingPopUpDescription">
            <p>When the labeler machine runs out of labels, it is up to one of the associates to replace the labels
             so the machine can continue running. It is important to be quick and accurate when reloading the labels. 
             Watch the video and read the step-by-step instructions to complete this training.    
            </p>
        </div>
        <div class= "trainingStepList">
            <p>
                1. Pull off used back paper <br>
                2. Find new pack of front & back labels <br>
                3. Insert front labels onto the front left roller <br>
                4. Insert back labels onto the front right roller <br>

            </p>
        </div>
        <video class="trainingVideo" controls>
            <source src="testVid.mp4">
        </video>

                        <!--add video element-->
                        <!--add step by step instructions-->
                                        
        <!--need a text header, a step by step instruction list, a video, and an input form for name-->
    </div>  


</div>

这是我的 CSS

    .popUpModal{
    width: 100%; 
    height: 100%;
    top: 0;

    background-color: rgba(0,0,0,0.7);

    display: none;
    position: fixed;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.popUpContent{
    width: 50%;
    height: 80%;
    padding-bottom: 20px;

    background-color: white;
    border-radius: 8%;

    display: inline-block;
    justify-content: center;
    vertical-align: center;
    position: relative;

    font-family: "Source Sans Pro",sans-serif;
}

.close{
    position: absolute;

    right: 5px;
    margin-right: 5%;

    font-size: 40px;
    transform: rotate(45deg);
    font-weight: bold;
    cursor: pointer;
}

.trainingPopUpHeader{
    margin-top: 4%;
    font-size: 40px;

    text-decoration: underline;
}

.trainingPopUpDescription{
    margin-top: 4%;
    margin-left: 10%;
    margin-right: 10%;

    font-size: 20px;
}

.trainingStepList{
    margin-left: 4%;

    font-weight:bold;
    text-align: left;
    font-size: 30px;
}

.trainingVideo{
    height: 25%;
    border-radius: 5%;
    margin-bottom: 3%;
}

这是我的 JavaScript，它不起作用

    var modal = document.getElementsByClassName("popUpModal");
var trainingCard = document.getElementsByClassName("trainingCard");

trainingCard.onclick = function(){
    modal.style.display = "flex";
}

Answer 1

我将尝试解释我的抽象示例。 您的目标是存档以多次触发一个模态。 首先：您必须绑定每个触发模式的按钮。 您的第二个目标是将上下文中模式中的内容更改为按钮。 例如，如果将上下文内容作为数据属性放入按钮，则可以将其存档。 您可以获取它并插入到模式中。

抽象例子

 const btns = document.querySelectorAll('.btn-list button'); const m = document.querySelector('.modal'); btns.forEach(b => { b.addEventListener('click', (e) => { m.classList.remove('hide') const t = e.target.getAttribute('data-attribute'); m.querySelector('p').innerHTML = t; }) }); const close = document.querySelector('.close'); close.addEventListener('click', (e) => { m.classList.toggle('hide'); })

 .modal { position: relative; height:200px; width: 200px; background-color: green; color: white; padding: 2px 10px; box-sizing: border-box; }.modal div { position: absolute; top: -10px; right:-10px; text-align:left; margin-top: auto; font-weight: bold; padding: 5px 10px; background: red; border-radius: 20px; cursor: pointer; }.hide { display: none; }

 <div class="modal"> <p>MODAL</p> <div class="close">x</div> </div> <ul class="btn-list"> <li><button data-attribute="text 1">1</button></li> <li><button data-attribute="text 2">2</button></li> <li><button data-attribute="text 3">3</button></li> </ul>

Answer 2

顾名思义，“getElementsByClassName”为您提供了多个元素，又名 HTMLCollection，它实际上是一个数组。 并且您不能将“onclick”或更改“样式”（这些集合中不存在）分配给该集合。 您必须遍历集合并将事件分别分配给每个项目。

Answer 3

在您的代码modal中包含 HTML 个元素的列表。 你只能做modal.style.display = when modal是一个 HTML 元素。 一个简单的解决方案是改为

var modal = document.getElementById("popUpModal");

使用getElementById而不是getElementsByClassName 。 这将为您提供单个 HTML 个元素，而不是元素列表。

另一种解决方案在您可能有多个要更改的元素时非常有用，它是按照 digitalniweb 的建议进行操作并遍历使用getElementsByClassName返回的所有 popUpModals，更改每个模态以显示 flex。 这个堆栈溢出问题为您提供了如何循环遍历document.getElementByClassName的结果的不同选项（从技术上讲，它返回一个 HTML 集合，因此循环遍历数组的正常方法并不总是有效，因此，在那个 SO 答案中，你会发现人们想出了很多替代解决方案，可以循环遍历 HTML 集合）。