彈出模式出現在點擊

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 集合）。