Форум

ArtemY777 · #1 (**permalink**) 23.05.2021, 20:36

Доброго времени суток! начинаю только изучать .js. У себя на сайте вывел модульное окно при клике на строку

прокручивание странице на фоне убрал через overflow:hidden

при закрытие модульного окна на крестик возвращаю body overflow:scroll

при клике за пределами окна оно тоже закрывается, но не пойму как вернуть body overflow:scroll

подскажите пожалуйста как вернуть?

//вызов модального окна
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("closex")[0];

btn.onclick = function() {
    modal.style.display = "block";
    $('body').css('overflow','hidden'); // при открытие фиксация экрана
}

span.onclick = function() {
    modal.style.display = "none";
    $('body').css('overflow','scroll'); // при закрытии скрол экрана
}

<div class="modal-button-window">
                            <a id="myBtn">Не знаете код краски?</a>
                      </div>


                        <div id="myModal" class="modal">
                              <div class="modal-content-window">
                                     <div class="modal-block">
                                          <button class="closex" data-dismiss="modal">x</button>  
                                          <div class="modal-body">
                                               <p>текст</p>
                                         </div>
                                    </div>
                             </div>
                         </div>

рони · #2 (**permalink**) 23.05.2021, 20:39

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

как вернуть body overflow:scroll

$('body').css('overflow','');

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

ArtemY777 · #3 (**permalink**) 23.05.2021, 20:56

спасибо!

рони · #4 (**permalink**) 23.05.2021, 20:58

ArtemY777,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .modal {
            display: none;
            background-color: #808080;
        }
        body {
            height: 2000px;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var modal = document.getElementById('myModal');
            var btn = document.getElementById("myBtn");
            var span = document.querySelector(".closex");
            btn.addEventListener("click", function(event) {
                event.preventDefault();
                modal.style.display = "block";
                document.body.style.overflow = "hidden"
            })
            function close() {
                modal.style.display = "";
                document.body.style.overflow = ""
            }

            span.addEventListener("click", close)

            document.addEventListener("click", function(event) {
                var target = event.target;
                if(target.closest(".modal") || target.closest(".modal-button-window")) return;
                if(modal.style.display == "block") close()
            })

        });
    </script>
</head>
<body>
    <div class="modal-button-window">
        <a id="myBtn">Не знаете код краски?</a>
    </div>
    <div id="myModal" class="modal">
        <div class="modal-content-window">
            <div class="modal-block">
                <button class="closex" data-dismiss="modal">x</button>
                <div class="modal-body">
                    <p>текст</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

ArtemY777 · #5 (**permalink**) 23.05.2021, 21:21

СПАСИБО!!!))

Форум

Справочник

Discord чат

Курсы javascript