CODEWITHSUNDEEP
jqueryhtml
Дмитрий Мишечкин
Дмитрий Мишечкин

Reputation: 23

Script for searching for the desired modal window (by the Id button) (Does not work)

Take the Id button and use the switch to "search" the case with the same id and change the display: none style to block.

More clearly described in the code as below:

$(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>

When pressed, it should select a modal window from one of several buttons.

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

Upvotes: 2

Views: 39

Answers (1)

saAction
saAction

Reputation: 2065

Welcome to StackOverflow,

Problem 1 : There is minor mistake to get ID you need to use jQuery attribute attr() in order to get ID

Problem 2 : Your second model id="myModal-2" is inside your first model id="myModal", you need to move it out so it will be visible by clicking on second link.

Problem 3 : jQuery show() function is itself to make any element visible, you don't need to write "display", "block" inside.

Here i fixed the problems, pleae check it: 

$('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>

Note : Above code is working but your still need to work on css for presentation and other jquery related to closing the model and

But i hope that your will understand the concepts, thanks.

Upvotes: 1

Related Questions