單擊時出現彈出模式-有解無憂

我有一個頁面，上面有一堆卡片。我希望在點擊卡片時出現一個彈出視窗。最終，我希望每張卡的彈出內容都不同，但現在我只想讓彈出視窗正常作業。我能夠讓 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";
}

uj5u.com熱心網友回復：

顧名思義，“getElementsByClassName”為您提供了多個元素，即 HTMLCollection，它實際上是一個陣列。而且您不能將“onclick”或更改“樣式”（這些集合中不存在）分配給此集合。您必須遍歷集合并將事件分別分配給每個專案。

uj5u.com熱心網友回復：

在您的代碼modal中包含一個 HTML 元素串列。您只能modal.style.display = 在modal是 HTML 元素時執行此操作。一個簡單的解決方案是改為

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

使用getElementById而不是getElementsByClassName. 這將為您提供單個 HTML 元素，而不是元素串列。

當您可能有多個要更改的元素時，另一種解決方案是很好的，它是按照 digitalniweb 的建議進行操作，并遍歷 using 回傳的所有 popUpModals getElementsByClassName，將每個模態更改為顯示 flex。這個堆疊溢位問題為您提供了不同的選項來遍歷結果document.getElementByClassName（從技術上講，它回傳一個 HTML 集合，因此回圈遍歷陣列的正常方法并不總是有效，因此，在那個 SO 答案中，您會發現人們提出了許多替代解決方案，以使回圈遍歷 HTML 集合成為可能）。

uj5u.com熱心網友回復：

我將嘗試解釋我的抽象示例。您的目標是歸檔以多次觸發一種模式。首先：您必須系結觸發模式的每個按鈕。您的第二個目標是將背景關系中模式中的內容更改為按鈕。例如，如果您將背景關系內容作為資料屬性放入按鈕，則可以將其存檔。您可以獲取它并插入到模態中。

抽象例子

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/453123.html

標籤：javascript html css

上一篇：如何在CSS上制作影像邊框/陰影效果

下一篇：為什么導航欄位置=粘性不起作用？