0

Подразумевалось, что при нажатии в любое место, за исключением тела popup'a, будет срабатывать тумблер его закрытия. Однако не работает инверсия [!] данного условия в if. Если же убрать инверсию, то условие будет выполняться, но наоборот. Подскажите кто чем сможет

function togglePopup(){
    document.querySelector(".the_project").classList.toggle("active") };
const popup = document.querySelector(".popup")
if (popup) {
    popup.addEventListener("click", function (e) {
      if (!e.target.closest(".pop_parent"))  {
                togglePopup();
            }
        });
    }
.the_project .everything {
    position:fixed;
    top:0px;
    left:0px;
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.7);
    z-index:1;
    display:none;}
.the_project.active .everything {
    display: block;}
.open {   
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    padding:15px;
    font-size:18px;
    border:2px solid #222;
    color:#222;
    text-transform:uppercase;
    font-weight:600;
    background:#fff;}
.the_project .popup {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(0);
    background:#fff;
    width:500px;
    height:250px;
    z-index:2;
    text-align:center;
    padding:20px;
    box-sizing:border-box;
    font-family:"Open Sans",sans-serif;}
.the_project.active .popup{
    transition:all .3s ease-in-out;
    transform:translate(-50%,-50%) scale(1);}
.the_project .close {
    cursor:pointer;
    position:absolute;
    right:20px;
    top:20px;
    width:30px;
    height:30px;
    background:#222;
    color:#fff;
    font-size:25px;
    font-weight:600;
    line-height:30px;
    text-align:center;
    border-radius:50%;}
<link rel="stylesheet" href="hlp.css">
        <div class="the_project" id="prj">
        <button onclick="togglePopup()" class="open">show popup</button>
        <div class="everything"></div>
<div class="pop_parent">
            <div class="popup">
                <h1>title</h1>
                <p>Lorem ipsum dolor sit amet.</p>
                <button onclick="togglePopup()" class="close">&times;</button>
            </div>
        </div>
<script src="hlp.js"></script>
    </body>

2
  • Выведите в консоль e.target.closest(".pop_parent"). Во-первых значение выражения не является булевым, а значит преобразуется к типу bool, по прикольным правилам.
    – XelaNimed
    12 апр 2021 в 18:50
  • Спасибо, добрый человек Я думал сухая теория к верстальщикам не относится, но чем больше узнаю, тем больше понимаю: к тебе относится всё, что есть в том языке, на котором ты пишешь Сколько же ещё учить, ух
    – playa
    12 апр 2021 в 19:30

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.