第二个 Instagram 按钮的 CSS 属性

Question

ch j9

Asked:2024-08-15 04:51:01 +0000 UTC2024-08-15 04:51:01 +0000 UTC 2024-08-15 04:51:01 +0000 UTC

如何创建相同的div？

772

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代码

<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代码

.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代码

        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 个回答

Voted

Володя Иванов · Answer 1 · 2024-08-15T23:12:20Z

关于卡片：您可以创建一个包含所有卡片数据的数组

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

例如像这样

接下来，获取容器并创建一个循环

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>

我不知道这是否会对某人有帮助

如何创建相同的div？

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

如何创建相同的div？

1 个回答

相关问题