Не могу закрыть модальный, когда я нажимаю за его пределами - PullRequest
Новая
       20

Не могу закрыть модальный, когда я нажимаю за его пределами

0 голосов
/ 25 апреля 2020

Я создаю свой первый веб-сайт, и у меня возникают проблемы с закрытием модального окна (nav), чтобы закрыть с помощью javascript.

HTML: 

<nav>
                <img src="/Images/ham.png" alt="toggle menu" class="menu" id="menu"> 
                </a>


                <ul class="show-desktop hide-mobile" id="nav">
                    <li id="exit" class="exit-btn hide-desktop">
                        <img src="/Images/exit.svg" alt="exit menu">
                    </li>
                    <li><a href="index.html">home</a></li>
                    <li><a href="work.html">work</a></li>
                    <li><a href="about.html">about</a></li>
                    <li><a href="contact.html">contact</a></li>
                </ul>
            </nav>

Javascript: 

<script>

    var menu = document.getElementById('menu');
    var nav = document.getElementById('nav');
    var exit = document.getElementById('exit');



    menu.addEventListener('click', function(e) {
        nav.classList.toggle('hide-mobile');
        e.preventDefault();
    });

    exit.addEventListener('click', function(e) {
        nav.classList.add('hide-mobile');
        e.preventDefault();
    });



    window.onclick = function(event) {
        if (event.target == nav) {
        nav.classList.toggle('hide-mobile');
        e.preventDefault();
        }
        else if (event.target != nav){
        nav.classlist.add('hide-mobile');
        e.preventDefault();
        }
}

</script>

CSS: 


.hide-mobile{
    right: -400px;
    transition: linear .5s;
}

nav ul {
    position: fixed;
    width: 60%;
    top: 0;
    right: 0;
    text-align: left;
    background: rgb(36,41,44);
    height: 100%;
    z-index: 7;
    padding-top: 3em;
    right: 0px;
    transition: ease-out .5s;
}

Я получил первый сет javascript кода (функции меню и кнопки выхода) из учебника, и теперь я пытаюсь добавить функцию закрытия при внешнем щелчке. Я добавил функцию window.onclick для отображения модальности nav при нажатии на nav и скрытия ее при нажатии за пределами nav, но она не закрывается при нажатии за пределами nav. Есть идеи, что я делаю не так? Спасибо.

Ответы [ 2 ]

0 голосов
/ 25 апреля 2020

В функции window.onclick вы должны проверить, открыт ли модальный режим? Вы можете добавить определенный класс c, когда модал активен, и если он активен, вы можете закрыть его.

0 голосов
/ 25 апреля 2020 
var menu = document.getElementById('menu');
var nav = document.getElementById('nav');
var exit = document.getElementById('exit');

menu.addEventListener('click', function(e) {
    nav.classList.toggle('hide-mobile');
    e.preventDefault();
    e.stopPropagation();
});

exit.addEventListener('click', function(e) {
    nav.classList.add('hide-mobile');
    e.preventDefault();
});

window.onclick = function(event) {
    if (event.target != nav){
        nav.classList.add('hide-mobile');
        event.preventDefault();
    }
}

это может решить вашу проблему с вашим путем.

...