БЛОГ НА HUSL


Как создать одинаковые div?

Автор вопроса: ch j9 

function openmodal() {
    document.getElementById("modalopenbackblc").classList.add("open")
}

let openModalbtn0 = document.querySelector("#openModalbtn0")

openModalbtn0.addEventListener("click", openmodal)

document.getElementById("closemodal").addEventListener("click", function() {
    document.getElementById("modalopenbackblc").classList.remove("open")
});
.container1{
        position: absolute;
        display: block;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 205vh;
        background-color: darkblue;
    }


    .midblc{
        position: relative;
        display: block;
        top: 4%;
        left: 0%;
        width: 90%;
        height: 80vh;
        margin: auto;
        margin-bottom: 4%;
        background-color: darkcyan;
    }

    .touchsquaerblc{
        position: relative;
        display: inline-block;
        top: 2%;
        left: 2%;
        width: 20%;
        height: 35vh;
        margin-left: 3%;
        margin-bottom: 3%;
        border-radius: 1vh;
        overflow: hidden;
        cursor: pointer;
        background-color: cornflowerblue;
    }

    .touchsquaerblc:hover{
        transform: scale(1.05);
        transition: 0.5s;
    }

    .touchsquaerblc:not(hover){
        transform: scale(1);
        transition: 0.5s;
    }

    .squaernametxtblc{
        position: absolute;
        display: block;
        bottom: 0%;
        left: 0%;
        width: 100%;
        height: 5vh;
        vertical-align: top;
        background-color: darkgoldenrod;
    }

    .nametagtxtblc{
        position: relative;
        display: block;
        top: 2%;
        left: 0%;
        width: 100%;
        height: 6vh;
        margin: auto;
        background-color: darkorange;
    }




    .modalbackblc{
        position: fixed;
        display: block;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        z-index: 999;
        visibility: hidden;
        opacity: 0;
        transition: opacity .4s, visibility .4s;
        background-color: rgba(27, 27, 27,0.7);
    }

    .modalbackblc.open{
        visibility: visible;
        opacity: 1;
    }

    .modalfrontblc{
        position: sticky;
        display: flex;
        top: 5%;
        left: 0%;
        width: 70%;
        height: 90%;
        border-radius: 2vh;
        transition: transform .3s;
        transform: scale(0.3);
        margin: auto;
        overflow: hidden;
        background-color: #ffffff;
    }

    .modalbackblc.open .modalfrontblc{
        transform: scale(1);
    }

    .modalnametagblc{
        position: absolute;
        display: flex;
        top: 0%;
        left: 0%;
        width: 98.5%;
        height: 6vh;
        background-color: darkcyan;
    }

    .modalclosebtnblc{
        position: absolute;
        display: flex;
        top: 0%;
        right: 0%;
        width: 1.5%;
        height: 100%;
        cursor: pointer;
        background-color: darkred;
    }

    .modaltableservicesblc{
        position: relative;
        display: flexbox;
        top: 7%;
        left: 0%;
        width: 98.5%;
        height: 100%;
        background-color: darkorange;
    }

    .modaltableservices{
        position: relative;
        display: block;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 8%;
        margin-bottom: 0.3%;
        background-color: darkorchid;
    }
<div class="container1">


        <div class="midblc">

            <div id="openModalbtn0" class="touchsquaerblc">
                <div class="squaernametxtblc"></div>
            </div>

        </div>

    </div>

    <div id="modalopenbackblc" class="modalbackblc">

        <div class="modalfrontblc">

            <div class="modalnametagblc"></div>

            <div id="closemodal" class="modalclosebtnblc"></div>

            <div class="modaltableservicesblc">

            </div>

    </div>

Всем здравствуйте! Сколько оттягивал написание, но уже сдался :(

Не могу понять как сделать одинаковые карточки, единственное, что их будет отличать, это название и наполненность в открытом модальном окне.

Я сделал быстрый набросок, получается у меня есть контейнер для карточек, и одна нужная карточка (из которой нужно сделать условно 4 карточки), при нажатии на которую, открывается модальное окно, с информацией.

Перечитал кучу статей, посмотрел видео и тд, практически везде просто вручную добавляют по 20 карточек, что мне не особо понравилось.

Поэтому я хочу добавить их с помощью js, но в js я мега не силен.

html code

<div class="container1">


    <div class="midblc">

        <div id="openModalbtn0" class="touchsquaerblc">
            <div class="squaernametxtblc"></div>
        </div>

    </div>

</div>

<div id="modalopenbackblc" class="modalbackblc">

    <div class="modalfrontblc">

        <div class="modalnametagblc"></div>

        <div id="closemodal" class="modalclosebtnblc"></div>

        <div class="modaltableservicesblc">

        </div>

</div>

css code

.container1{
    position: absolute;
    display: block;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 205vh;
    background-color: darkblue;
}


.midblc{
    position: relative;
    display: block;
    top: 4%;
    left: 0%;
    width: 90%;
    height: 80vh;
    margin: auto;
    margin-bottom: 4%;
    background-color: darkcyan;
}

.touchsquaerblc{
    position: relative;
    display: inline-block;
    top: 2%;
    left: 2%;
    width: 20%;
    height: 35vh;
    margin-left: 3%;
    margin-bottom: 3%;
    border-radius: 1vh;
    overflow: hidden;
    cursor: pointer;
    background-color: cornflowerblue;
}

.touchsquaerblc:hover{
    transform: scale(1.05);
    transition: 0.5s;
}

.touchsquaerblc:not(hover){
    transform: scale(1);
    transition: 0.5s;
}

.squaernametxtblc{
    position: absolute;
    display: block;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 5vh;
    vertical-align: top;
    background-color: darkgoldenrod;
}

.nametagtxtblc{
    position: relative;
    display: block;
    top: 2%;
    left: 0%;
    width: 100%;
    height: 6vh;
    margin: auto;
    background-color: darkorange;
}




.modalbackblc{
    position: fixed;
    display: block;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transition: opacity .4s, visibility .4s;
    background-color: rgba(27, 27, 27,0.7);
}

.modalbackblc.open{
    visibility: visible;
    opacity: 1;
}

.modalfrontblc{
    position: sticky;
    display: flex;
    top: 5%;
    left: 0%;
    width: 70%;
    height: 90%;
    border-radius: 2vh;
    transition: transform .3s;
    transform: scale(0.3);
    margin: auto;
    overflow: hidden;
    background-color: #ffffff;
}

.modalbackblc.open .modalfrontblc{
    transform: scale(1);
}

.modalnametagblc{
    position: absolute;
    display: flex;
    top: 0%;
    left: 0%;
    width: 98.5%;
    height: 6vh;
    background-color: darkcyan;
}

.modalclosebtnblc{
    position: absolute;
    display: flex;
    top: 0%;
    right: 0%;
    width: 1.5%;
    height: 100%;
    cursor: pointer;
    background-color: darkred;
}

.modaltableservicesblc{
    position: relative;
    display: flexbox;
    top: 7%;
    left: 0%;
    width: 98.5%;
    height: 100%;
    background-color: darkorange;
}

.modaltableservices{
    position: relative;
    display: block;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 8%;
    margin-bottom: 0.3%;
    background-color: darkorchid;
}

js code

        function openmodal() {
        document.getElementById("modalopenbackblc").classList.add("open")
    }
    
    let openModalbtn0 = document.querySelector("#openModalbtn0")
    
    openModalbtn0.addEventListener("click", openmodal)
    
    document.getElementById("closemodal").addEventListener("click", function() {
        document.getElementById("modalopenbackblc").classList.remove("open")
    });

введите сюда описание изображения


Источник

Ответы (1 шт):

Автор решения: Володя Иванов

По поводу карточек: Вы можете создать массив с данными о всех карточках

const cards = [
   {name: "card1", description: "description1"},
   {name: "card2", description: "description2"},
   {name: "card3", description: "description3"}
]

Например такой

Дальше получить container и создать цикл

const container1 = document.querySelector("#container1") // добавьте id в html

for(let i = 0; i < cards.length; i++) {
    const card = cards[i]
    // дальше добавьте новый элемент в container1
    // есть разные способы сделать это, но чтобы не загромождать ответ 
    // использую innerHTML

    container1.innerHTML += `
        <div class="midblc">
            ${card.name}
            <div id="openModalbtn0" class="touchsquaerblc">
                <div class="squaernametxtblc" onclick="() => openModal(${card})"></div>
            </div>

        </div>
    `
}

Хорошей идеей будет добавить одно модальное окно в html

<div class="your-classes" id="modal">
<h1 id="modalName"></h1>
<p id="modalDescription"></p>
</div>

const modal = document.querySelector("#modal")
const modalName = modal.querySelector("#modalName")
const modalDescription = modal.querySelector("#modalDescription")

function openModal(card) {
modal.style.display = "block" // flex, grid, inline, что хотите

modalName.innerText = card.name
modalDescription.innerText = card.description
}

Все вместе:

const cards = [
    { name: "card1", description: "description1" },
    { name: "card2", description: "description2" },
    { name: "card3", description: "description3" },
]

const container1 = document.querySelector("#container1")

for (let i = 0; i < cards.length; i++) {
    const card = cards[i]

    const stringifiedCard = JSON.stringify(card)

    container1.innerHTML += `
        <div class="card">
            ${card.name}
            <button class="open-modal-button" onclick='openModal(${stringifiedCard})'>Открыть модальное окно</button>

        </div>
    `
}

const modal = document.querySelector("#modal")
const modalName = modal.querySelector("#modalName")
const modalDescription = modal.querySelector("#modalDescription")

function openModal(card) {
    modal.style.display = "block"

    modalName.innerText = card.name
    modalDescription.innerText = card.description
}

function closeModal(card) {
    modal.style.display = "none"
}
.container1 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.card {
    width: 150px;
    height: 150px;
    border: 2px solid black;
}

.modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    background-color: #cfcfcf;
    display: none;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div class="container1" id="container1"></div>

        <div class="modal" id="modal">
            <h3>Это модальное окно</h3>
            <h3 id="modalName"></h3>
            <p id="modalDescription"></p>
            <button onclick="closeModal()">Закрыть</button>
        </div>
    </body>
</html>

Не знаю вдруг кому-то поможет

→ Ссылка

licensed under cc by-sa 3.0 with attribution.