卡上的模态窗口点击 JS CSS PHP

Question

所以我的 html 上有 6 张卡片。每点击一次需要弹出一个模态窗口（这个模态窗口是一张卡片，信息比较多，所以每个模态窗口对应一张卡片）。

我不知道该怎么做。在网上搜索了一天后，我在这里寻求您的帮助。

我尝试制作 html animal_card 和我的模态 appart。那么所有的内容都会随着php而改变。 并且 Javascript 需要在点击时将模态窗口 css 属性更改为绝对。

有人知道如何用 Javascript 做到这一点吗？

HTML：

<div class="animal_card">
    <div class="card_title">
        <h3>title</h3>
    </div>

    <div class="card_image">
        <img src="image.img" alt="">
    </div>
    <div class="card_text">
        <div class="card_info">
            <div class="card_info_age">
                <h4>Age</h4>
                <p>14</p>
            </div>
            <div class="card_info_gender">
                <h4>Gender :</h4>
                <p>Female</p>
            </div>
        </div>
        <h4>Who am I</h4>
        <p>Description Text</p>
    </div>
</div> 

<div class="bg-modal">
            <div class="modal-content">

                <div class="modal-animal">
                    <h1>Animal Name</h1>
                    <button class="close" onclick="closeModal()">&times</button>
                    <div><img src="img/greciaprofile.jpg" alt=""></div>

                    <div class="animal-informations">
                        <div class="left">
                            <label for="">Age</label>
                            <p>14</p>
                            <label for="">Sexe</label>
                            <p>Female</p>
                        </div>
                        <div class="right">
                            <label for="">Description</label>
                            <p>
                                Text
                            </p>
                        </div>
                    </div>

                    <div>
                        <button class="main">Adopt</button>
                        <button class="secondary">Support</button>
                    </div>
                </div>
            </div>
        </div>

CSS：

.bg-modal {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
}

.modal-content {
    position: absolute;
    margin-top: 5rem;
    width: 75vw;
    background-color: $white;
    border-radius: 15px;
}

Javascript：

const cards = document.querySelectorAll('.animal_card');
const modal = document.getElementsByClassName('bg-modal');

const onCardClick = async (e) => {
    const card = e.currentTarget;

    modal.style.position = 'absolute';
}

cards.forEach(card => card.addEventListener('click', onCardClick));

function closeModal() {
    modal[0].style.position = 'none';
}

Answer 1

const cards = document.querySelectorAll('.animal_card');
const modal = document.getElementsByClassName('bg-modal');

const getKeyMap = (modal) => {
 if (modal) {
    let i;
    let keyMap = {};
    for (i = 0; i < modal.length; i++) {
      const item = modal[i];
      const key = item.getAttribute('key');
      keyMap[key] = item;
    }
    
    return keyMap;
 }
 
 return null;
};

const modalMap = getKeyMap(modal);

const onCardClick = async (e) => {
    const card = e.currentTarget && e.currentTarget.getAttribute('key') || null;
    const selectedModal = modalMap[card] || null;
    
   if (selectedModal) {
     selectedModal.style.position = 'absolute';
   } 
}

cards.forEach(card => card.addEventListener('click', onCardClick));

.bg-modal {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    /* position: absolute; */
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
}

.modal-content {
    position: absolute;
    margin-top: 5rem;
    width: 75vw;
    background-color: $white;
    border-radius: 15px;
}

<div key="5" class="animal_card">
    <div class="card_title">
        <h3>title</h3>
    </div>

    <div class="card_image">
        <img src="image.img" alt="">
    </div>
    <div class="card_text">
        <div class="card_info">
            <div class="card_info_age">
                <h4>Age</h4>
                <p>14</p>
            </div>
            <div class="card_info_gender">
                <h4>Gender :</h4>
                <p>Female</p>
            </div>
        </div>
        <h4>Who am I</h4>
        <p>Description Text</p>
    </div>
</div> 

<div class="bg-modal" key="5">
            <div class="modal-content">

                <div class="modal-animal">
                    <h1>Animal Name</h1>
                    <button class="close">&times</button>
                    <div><img src="img/greciaprofile.jpg" alt=""></div>

                    <div class="animal-informations">
                        <div class="left">
                            <label for="">Age</label>
                            <p>14</p>
                            <label for="">Sexe</label>
                            <p>Female</p>
                        </div>
                        <div class="right">
                            <label for="">Description</label>
                            <p>
                                Text
                            </p>
                        </div>
                    </div>

                    <div>
                        <button class="main">Adopt</button>
                        <button class="secondary">Support</button>
                    </div>
                </div>
            </div>
        </div>

因此，使用您的示例的直接答案是 onCardClick 上的 modal 返回一个集合，而不是单个元素。所以选择第一个modal[0] 将修复位置更新。我附上了一个例子。

如果您要根据您点击的卡片显示不同的模态，您通常需要一种方法来跟踪它们。真的取决于你想如何做到这一点，基于 id 或索引位置等。无论如何，如果这有帮助，请告诉我。