Форум

remmas · #11 (**permalink**) 06.08.2021, 20:22

Сообщение от рони

remmas,
все кнопки будут открывать одно и тоже модальное окно?

Да. Именно так

voraa · #12 (**permalink**) 06.08.2021, 20:39

Сообщение от remmas

Класс ссылке (кнопки) уже прописан.

Сообщение от remmas

<a href="#" id="myBtn">Модальное окно</a>

Где класс?

Сообщение от remmas

Если бы я хотел прописать классы то сюда с вопросом не пришел

Что мешает написать
<a href="#" id="myBtn" class="showmod">

Ну не хотите, как хотите

Да и не интересен ваш css
Что бы помочь, интересен html, со всеми ссылками кнопками (кстати, почему <a>, а не <button>?), и контейнером, где они находятся

рони · #13 (**permalink**) 06.08.2021, 20:40

remmas,

<!DOCTYPE html>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .modal {
            display: none;
            position: fixed;
            z-index: 999;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: #000;
            background-color: rgba(0, 0, 0, 0.4)
        }

        .modal-content {
            position: relative;
            background-color: #EAE5E5;
            margin: auto;
            padding: 0;
            border: 1px solid #444;
            width: 33%;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            -webkit-animation-name: animatetop;
            -webkit-animation-duration: .4s;
            animation-name: animatetop;
            animation-duration: .4s
        }

        .modal-content h2,
        h3 {
            font-weight: 400;
            font-size: 14px;
            line-height: 1.1
        }

        .modal-body-text {
            color: #514f4f;
            font-size: 14px;
            text-align: center;
            padding: 20px 16px
        }

        .contact {
            max-width: 467px;
            min-width: 320px
        }

        .contact * {
            outline: none;
            border: 0;
            background: none
        }

        form fieldset {
            display: block;
            padding: 25px 30px
        }

        form .col-2 {
            width: 100%
        }

        form .row:after {
            content: '';
            display: table;
            clear: both
        }

        form section {
            margin-bottom: 20px
        }

        form .input,
        form .textarea,
        form .radio,
        form .checkbox,
        form .button {
            position: relative;
            display: block
        }

        form .fa-append {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 29px;
            height: 29px;
            padding-left: 3px;
            border-left: 1px solid #e5e5e5;
            font-size: 15px;
            line-height: 29px;
            text-align: center;
            color: #ccc
        }

        form .input .fa-append+input,
        form .textarea .fa-append+textarea {
            padding-right: 46px
        }

        form .input input,
        form .textarea textarea {
            display: block;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            width: 100%;
            height: 50px;
            padding: 10px;
            outline: none;
            border: 1px solid #e5e5e5;
            border-radius: 0;
            background: #fff;
            font: 13px/19px 'Open Sans', Helvetica, Arial, sans-serif;
            color: #404040;
            appearance: normal;
            -moz-appearance: none;
            -webkit-appearance: none;
            transition: border-color .3s;
            -o-transition: border-color .3s;
            -ms-transition: border-color .3s;
            -moz-transition: border-color .3s;
            -webkit-transition: border-color .3s
        }

        form .input:hover input,
        form .textarea:hover textarea,
        form .checkbox:hover i {
            border-color: #00BDAB
        }

        form .input input:focus,
        form .textarea textarea:focus,
        form .checkbox input:focus+i {
            border-color: #009688
        }

        form .button {
            float: right;
            height: 39px;
            overflow: hidden;
            margin-left: 20px;
            padding: 0 20px;
            outline: none;
            border: 0;
            background-color: #ff0202;
            font: 300 13px/39px 'Open Sans', Helvetica, Arial, sans-serif;
            text-decoration: none;
            color: #fff;
            cursor: pointer;
            opacity: .8;
            transition: opacity .2s;
            -o-transition: opacity .2s;
            -ms-transition: opacity .2s;
            -moz-transition: opacity .2s;
            -webkit-transition: opacity .2s
        }

        form .button:hover {
            opacity: 1
        }

        @-webkit-keyframes animatetop {
            from {
                top: -300px;
                opacity: 0
            }

            to {
                top: 0;
                opacity: 1
            }
        }

        @keyframes animatetop {
            from {
                top: -300px;
                opacity: 0
            }

            to {
                top: 0;
                opacity: 1
            }
        }

        .modal-header {
            padding: 2px 16px;
            background-color: #EAE5E5;
            color: #514f4f;
            border-bottom: 1px solid #d2c7c7
        }

        .modal-body {
            padding: 2px 8px
        }

        .modal-footer {
            padding: 2px 8px;
            background-color: #EAE5E5;
            color: #514f4f;
            border-top: 1px solid #d2c7c7;
            padding: 10px 15px;
            font-size: 8px;
            text-align: center
        }

        .close {
            color: #444;
            float: right;
            font-size: 28px;
            font-weight: 700
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer
        }

        @media (max-width: 991px) {
            .modal-content {
                width: 85%
            }
        }

        @media (max-width: 767px) {
            .modal-content {
                width: 50%
            }
        }

        @media (max-width: 575px) {
            .modal-content {
                width: 75%
            }
        }

        @media (max-width: 420px) {
            .modal-content {
                width: 95%
            }

            .modal-body {
                padding: 0
            }

            .modal-footer,
            .modal-content h2 {
                font-size: 10px
            }
        }

        @media screen and (max-width: 470px) {

            .col,
            .col-2 {
                float: none !important;
                width: 100% !important
            }
        }

        .modal.open {
            display: block;
        }
    </style>

    <script>
        document.addEventListener("click", ({
            target
        }) => {
            let elem;
            if (elem = target.closest("a.btn_modal")) myModal.classList.add("open");
            if (elem = target.closest("#myModal .close") || target == myModal) myModal.classList.remove("open");
        })
    </script>
</head>

<body>
    <a href="#" id="myBtn" class="btn_modal">Модальное окно</a>
    <a href="#" id="myBtn1" class="btn_modal">Модальное окно</a>
    <a href="#" id="myBtn2" class="btn_modal">Модальное окно</a>
    <a href="#" id="myBtn3" class="btn_modal">Модальное окно</a>
    <a href="#" id="myBtn4" class="btn_modal">Модальное окно</a>


    <div id="myModal" class="modal">
        <div class="modal-content">
            <div class="modal-header"> <span class="close">&times;</span>
                <h2>Верх окна</h2>
            </div>
            <div class="modal-body">
                Текст окна
            </div>
            <div class="modal-footer">Футер</div>
        </div>
    </div>

</body>

</html>

remmas · #14 (**permalink**) 06.08.2021, 20:42

Сообщение от voraa

Что бы помочь, интересен html, со всеми ссылками кнопками (кстати, почему <a>, а не <button>?), и контейнером, где они находятся

тук

Сайт собирался на этом конструкторе

remmas · #15 (**permalink**) 06.08.2021, 21:08

Сообщение от рони

remmas,

Все супер с скриптом, вот только работает один раз. Когда кликаю еще раз, то не вызывает повторно форму

Чтобы повторно открыть, то приходится обновлять страницу

рони · #16 (**permalink**) 06.08.2021, 22:07

remmas,
можно только гадать, что у вас не так.

remmas · #17 (**permalink**) 07.08.2021, 07:27

Сообщение от рони

remmas,
можно только гадать, что у вас не так.

Да нет.. Все так.. Просто убрал с ссылки href"#" и все заработало. Огромнейшее спасибо

рони · #18 (**permalink**) 07.08.2021, 07:36

Сообщение от remmas

убрал с ссылки href"#"

как вариант ...

document.addEventListener("click", event => {
            let elem, {target} = event;
            if (elem = target.closest("a.btn_modal")) {
            event.preventDefault();
            myModal.classList.add("open");
            };
            if (elem = target.closest("#myModal .close") || target == myModal) myModal.classList.remove("open");
        })

Форум

Справочник

Discord чат

Курсы javascript