用于搜索所需模式窗口的脚本（通过“ Id”按钮）（无效）

Question

点击“ ID”按钮，然后使用开关“搜索”具有相同ID的案子，并将display: none样式更改为block。

在代码中更清晰地描述如下：

$(document).ready(function () {
    $(function () {
        $(this).click(function () { //When I click on some link, take its id (this), for example it's myBtm
            switch ($(this).id) { //replaces if
                case "myBtn": //If this === myBtn
                    $("#myModal").show("display", "block");//This function is performed here, otherwise it looks further
                    break;
            }
        })
    })
});

.modal {
    display: none;
    position: fixed;
    z-index: 6;
    left: 0;
    top: 0;
    width: 100%;
    height: 1000%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    position: fixed;
    z-index: 7;
    right: 0;
    top: 0;
    width: 35%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
}

    .modal-content h1 {
        color: #1C1C1C;
        font-size: 25px;
        text-align: left;
        margin-left: 70px;
        font-weight: 300;
        margin-bottom: 35px;
    }

    .modal-content p {
        width: 600px;
        text-align: left;
        line-height: 1.5;
        font-weight: 100;
    }

.modal_container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.modal-content span {
    font-size: 23px;
}

.modal-content img {
    height: 20vw;
    z-index: 7;
}

.close {
    color: #000;
    position: absolute;
    top: 25px;
    right: 40px;
}

.modal-2 {
    display: none;
    position: fixed;
    z-index: 6;
    left: 0;
    top: 0;
    width: 100%;
    height: 1000%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.4);
}

.modal-content-2 {
    position: fixed;
    z-index: 7;
    right: 0;
    top: 0;
    width: 35%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
}

    .modal-content-2 h1 {
        color: #1C1C1C;
        font-size: 25px;
        text-align: left;
        margin-left: 70px;
        font-weight: 300;
        margin-bottom: 35px;
    }

.modal-content p {
    width: 600px;
    text-align: left;
    line-height: 1.5;
    font-weight: 100;
}

.modal_container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.modal-content span {
    font-size: 23px;
}

.modal-content img {
    height: 20vw;
    z-index: 7;
}

.close {
    color: #000;
    position: absolute;
    top: 25px;
    right: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" id="myBtn">УЗНАТЬ ПОДРОБНЕЕ</a>
<div>
    <a href="#" id="myBtn-2">УЗНАТЬ ПОДРОБНЕ2Е</a>
</div>

<div id="myModal" class="modal">
    <div class="modal-content">
        <div class="modal_container">
            <span class="close">&#10006;</span>
            <h1>123</h1>
            <p>123</p>
            <div class="picture">
                <img src="img/orel-3.jpg" alt="">
            </div>
        </div>
    </div>
    <div id="myModal-2" class="modal-2">
        <div class="modal-content-2">
            <div class="modal_container-2">
                <span class="close">&#10006;</span>
                <h1>123</h1>
                <p>123</p>
                <div class="picture">
                    <img src="img/orel-3.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</div>

按下时，应从多个按钮之一中选择一个模式窗口。

https://codepen.io/oleggood22/pen/rZLMaY

Answer 1

欢迎使用StackOverflow

  

问题1 ：要使用ID，您需要使用jQuery，这是一个小错误   属性attr()以获取ID

     

问题2 ：您的第二个模型id="myModal-2"位于您的第一个模型中   型号id="myModal"，您需要将其移出，以便通过   点击第二个链接。

     

问题3 ：jQuery show()函数本身就是使任何元素可见的功能，您无需在内部编写"display", "block"。

在这里，我解决了问题，请检查一下：

$('a').click(function () {
    console.log($(this).attr('id'));
    switch ($(this).attr('id')) { //replaces if
        case "myBtn": //If this === myBtn
            $("#myModal").show();//This function is performed here, otherwise it looks further
            break;
        case "myBtn-2": //If this === myBtn-2
            $("#myModal-2").show();//This function is performed here, otherwise it looks further
            break;
    }

});

.modal {
    display: none;
    position: fixed;
    z-index: 6;
    left: 0;
    top: 0;
    width: 100%;
    height: 1000%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    position: fixed;
    z-index: 7;
    right: 0;
    top: 0;
    width: 35%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
}

    .modal-content h1 {
        color: #1C1C1C;
        font-size: 25px;
        text-align: left;
        margin-left: 70px;
        font-weight: 300;
        margin-bottom: 35px;
    }

    .modal-content p {
        width: 600px;
        text-align: left;
        line-height: 1.5;
        font-weight: 100;
    }

.modal_container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.modal-content span {
    font-size: 23px;
}

.modal-content img {
    height: 20vw;
    z-index: 7;
}

.close {
    color: #000;
    position: absolute;
    top: 25px;
    right: 40px;
}

.modal-2 {
    display: none;
    position: fixed;
    z-index: 6;
    left: 0;
    top: 0;
    width: 100%;
    height: 1000%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.4);
}

.modal-content-2 {
    position: fixed;
    z-index: 7;
    right: 0;
    top: 0;
    width: 35%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
}

    .modal-content-2 h1 {
        color: #1C1C1C;
        font-size: 25px;
        text-align: left;
        margin-left: 70px;
        font-weight: 300;
        margin-bottom: 35px;
    }

.modal-content p {
    width: 600px;
    text-align: left;
    line-height: 1.5;
    font-weight: 100;
}

.modal_container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.modal-content span {
    font-size: 23px;
}

.modal-content img {
    height: 20vw;
    z-index: 7;
}

.close {
    color: #000;
    position: absolute;
    top: 25px;
    right: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" id="myBtn">УЗНАТЬ ПОДРОБНЕЕ</a>
<div>
    <a href="#" id="myBtn-2">УЗНАТЬ ПОДРОБНЕ2Е</a>
</div>

<div id="myModal" class="modal">
    <div class="modal-content">
        <div class="modal_container">
            <span class="close">&#10006;</span>
            <h1>123</h1>
            <p>123</p>
            <div class="picture">
                <img src="https://picsum.photos/200/300/?random" alt="">
            </div>
        </div>
    </div>
</div>

 <div id="myModal-2" class="modal-2">
        <div class="modal-content-2">
            <div class="modal_container-2">
                <span class="close">&#10006;</span>
                <h1>123</h1>
                <p>123</p>
                <div class="picture">
                    <img src="https://picsum.photos/200/300/?random" alt="">
                </div>
            </div>
        </div>
    </div>

注意：上面的代码可以正常工作，但是您仍然需要在CSS上进行演示以及与关闭模型和

有关的其他jquery

但是我希望您能理解这些概念，谢谢。