第二个 Instagram 按钮的 CSS 属性

Question

TopTTeDHbIu-DeJLbFuH4uk

Asked:2023-10-09 21:23:10 +0000 UTC2023-10-09 21:23:10 +0000 UTC 2023-10-09 21:23:10 +0000 UTC

点击页面任意区域时无法关闭模态窗口

772

当您单击“圣彼得堡”时，应该打开一个模态窗口，但是，问题是我同时创建和删除了“活动”类，它负责此操作，我如何避免删除它，从而在任何地方关闭模态单击除自身之外的窗口？代码：

<div class="container-header">
    <div class="container-header-logo">В этом блоке удалил часть кода а то не вмещается</div>
    <div class="container-header-right">
        <div class="container-header-navigation">
            <div class="container-header-upper">
                <div class="header-mark-city">
                    <svg width="23" height="23" viewBox="0 0 23 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.255 14.8411C9.70747 14.8411 8.44128 13.5504 8.44128 11.9729C8.44128 10.3954 9.70747 9.10466 11.255 9.10466C12.8026 9.10466 14.0688 10.3954 14.0688 11.9729C14.0688 13.5504 12.8026 14.8411 11.255 14.8411ZM19.6963 12.2597C19.6963 7.05388 15.9681 3.36822 11.255 3.36822C6.54199 3.36822 2.81376 7.05388 2.81376 12.2597C2.81376 15.6155 5.55717 20.0613 11.255 25.3675C16.9529 20.0613 19.6963 15.6155 19.6963 12.2597ZM11.255 0.5C17.1639 0.5 22.5101 5.11783 22.5101 12.2597C22.5101 17.0209 18.7537 22.657 11.255 29.1822C3.75637 22.657 0 17.0209 0 12.2597C0 5.11783 5.34614 0.5 11.255 0.5Z"
                              fill="#C8B197"></path>
                    </svg>
                </div>
                <span class="header-city">Санкт-Петербург</span>
                <span class="header-upper-number-phone">+7 (931) 342-95-05</span>
            </div>
            <!--     Modal window       -->
            <div class="container-header-popup-change-city">
                <div class="popup-header-city">Ваш город</div>
                <div class="container-header-popup-svg-icon-moscow">
                    <svg class="popup-icon-moscow" width="31" height="42" viewBox="0 0 41 52" fill="none"
                         xmlns="http://www.w3.org/2000/svg">-->
                        <path d="M38.1061 38.5057V42.7118H37.515V38.5057H34.621V42.7118H34.0299V38.5057H31.1448V42.7118H30.289C30.289 41.3416 30.289 39.9713 30.289 38.5924C30.2714 38.5837 30.2449 38.5837 30.2272 38.575C29.5832 39.98 28.9479 41.3936 28.3039 42.7985C28.2774 42.7899 28.2509 42.7812 28.2156 42.7725C28.2156 39.8586 28.2156 36.9533 28.2156 33.9787C27.501 33.9787 26.8216 33.9787 26.1422 33.9787C25.5776 31.4897 25.0306 29.0614 24.4835 26.6244C23.6101 22.7738 22.7366 18.9233 21.8631 15.0727C21.3602 12.8699 20.8573 10.6584 20.3544 8.45564C20.4691 8.51634 20.5838 8.57705 20.6897 8.64643C21.6073 9.28819 22.5337 9.93863 23.4513 10.5804C23.5836 10.6671 23.7071 10.7625 23.8395 10.8492C23.8659 10.8319 23.8924 10.8145 23.9189 10.8059C23.4954 9.47031 23.0631 8.13476 22.6307 6.76451C23.8042 5.90594 24.96 5.06471 26.1246 4.21481C25.9481 4.14543 25.7981 4.14543 25.657 4.14543C24.4835 4.13676 23.3101 4.12809 22.1278 4.12809C21.8455 4.12809 21.722 4.03269 21.6337 3.77252C21.2808 2.67111 20.9014 1.58706 20.5309 0.49433C20.4779 0.346898 20.4162 0.208139 20.328 0C19.8427 1.43095 19.3839 2.77518 18.9075 4.16278C17.4517 4.16278 16.0224 4.16278 14.6019 4.16278C14.5931 4.18879 14.5931 4.21481 14.5842 4.24083C15.74 5.08205 16.887 5.91461 18.0516 6.76451C17.6105 8.14343 17.1782 9.49633 16.7194 10.936C17.1341 10.6411 17.4693 10.4069 17.8046 10.1815C18.634 9.60907 19.4633 9.03669 20.2927 8.47298C20.2838 8.55971 20.2838 8.64643 20.2662 8.73316C19.4457 12.3756 18.6163 16.018 17.7958 19.6518C16.8606 23.7885 15.9253 27.9166 14.9901 32.0534C14.8401 32.6951 14.6901 33.3369 14.5313 34.0133C13.8255 34.0133 13.1638 34.0133 12.4579 34.0133C12.4579 36.936 12.4579 39.8239 12.4579 42.7031C12.4315 42.7118 12.3962 42.7205 12.3697 42.7292C11.7433 41.3416 11.108 39.9626 10.4463 38.497C10.4463 39.9106 10.4463 41.3069 10.4463 42.7031H9.85518V38.497H6.97009V42.7031H6.37895V38.497H3.48504V42.7031H2.89391V38.497H0V42.7031V43.5357V52H10.4463C10.8522 52 11.2492 52 11.655 52C17.4429 52 23.2042 52 28.9744 52C29.4155 52 29.8479 52 30.289 52H41V43.5357V42.7031V38.497H38.1061V38.5057Z"
                              fill="#C8B197"></path>
                    </svg>
                    <div class="popup-header-moscow">Москва</div>
                </div>
                <div class="container-header-popup-svg-icon-saint-petersburg">
                    <svg class="popup-icon-saint-petersburg" width="29" height="42" viewBox="0 0 39 52" fill="none"
                         xmlns="http://www.w3.org/2000/svg">-->
                        <path d="M38.2989 44.2195L32.293 33.612L29.6914 27.1887L26.8954 15.9934L24.3951 12.9416L24.5218 9.10324L23.7109 4.03724L23.9727 1.5734L22.2917 0L20.4841 1.95378V4.26201L19.5042 5.14381L18.026 7.73732L17.7135 7.07165L18.3554 5.20432L16.9532 1.65985L12.4172 0.406318L11.3021 1.80682L7.1293 3.44938L6.77453 5.61929L8.81027 6.28495L9.96751 5.29942L11.7245 5.61929L8.38791 13.2788L6.54646 12.8552L3.2859 13.9877L0.641973 18.12L1.90903 20.5234L3.05783 20.1084L2.37362 17.7224L3.8434 16.3651L4.49383 20.0133L6.60559 21.5435L6.78298 20.3505L5.94672 16.6677L12.2736 18.9586L18.4399 21.993L20.1462 27.327L19.3353 29.3845L16.5478 28.7448H4.51072L5.17804 32.8166L7.95712 35.6608V37.485L0 38.4446C0 38.4446 0 51.6023 0 52L39 51.8703L38.2989 44.2195ZM21.0331 30.128L21.54 27.5777L21.2866 25.2781L23.3899 29.056L23.525 30.9147L21.0331 30.128ZM25.3749 31.468L25.2651 29.3067L22.6719 22.5722L26.8447 27.2838L29.0409 32.9809L25.3749 31.468Z"
                              fill="#C8B197"></path>
                    </svg>
                    <div class="popup-header-saint-petersburg">Санкт-Петербург</div>
                </div>
            </div>
            <!--     Modal window       -->
            <div class="header-nav-text">Проектирование</div>
            <div class="header-nav-text">Строительство</div>
            <div class="header-nav-text">Интерьер</div>
            <div class="header-nav-text">Лаунж</div>
            <div class="header-nav-text">Ландшафт</div>
            <div class="down-number-phone">+7 921 570 31 57</div>
        </div>
        <div class="container-header-hamburger">
            <svg class="hamburger-menu" width="56" height="25" viewBox="0 0 56 25" fill="none" cursor="pointer"
                 xmlns="http://www.w3.org/2000/svg">
                <line x1="0.5" y1="23.25" x2="55.5" y2="23.25" stroke="white" stroke-width="3"></line>
                <line x1="0.5" y1="1.75" x2="55.5" y2="1.75" stroke="white" stroke-width="3"></line>
            </svg>
        </div>
    </div>
</div>

CSS：

body {
    margin: 0;
    padding: 0;
    background-image: url('/images/picture-backgrounds.jpg');
    /*background-size: cover;*/
    /*background-repeat: no-repeat;*/
    /*background-attachment: fixed;*/
}


/* main container */
.container-header {
    display: flex;
    justify-content: space-between;
    height: 152px;
    padding-left: 142px;
    background-color: rgb(0,0,0, 0.66);
}

/* logo */
.container-header-logo {
    height: 100%;
    width: 408px;
    margin-right: 10px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border-right: 1px gray solid;
    border-left: 1px gray solid;

    cursor: pointer;
}

/* upper header navigation */
.container-header-right {
    display: flex;
}

.container-header-navigation {
    padding-top: 18px;
}

.container-header-upper {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;

    margin-bottom: 18px;
}

.header-mark-city {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 5px;
    cursor: pointer;
}

.header-city {
    margin-right: 45px;

    align-self: center;
    color: #c8b17a;
    font-size: 16px;
    font-family: sans-serif;
    font-weight: bold;

    border-bottom: 1px #c8b17a solid;
    padding-bottom: 3px;

    cursor: pointer;
}

.header-upper-number-phone {
    margin-right: 40px;

    color: white;
    font-family: sans-serif;
    font-size: 19px;

    transition: 0.3s ease;

    cursor: pointer;
}

.header-upper-number-phone:hover {
    transition: 0.3s ease;
    color: #c8b17a;
}

/* modal window */
.container-header-popup-change-city {
    display: grid;
    position: absolute;
    right: 325px;
    top: 50px;

    width: 240px;
    height: 0;
    overflow: hidden;
    background-color: white;

    transition: height 300ms ease;
}

.active {
    height: 180px;
    transition: height 300ms ease;
}

.popup-header-city {
    padding-top: 25px;
    padding-left: 20px;

    color: black;
    font-weight: bolder;
    font-size: 20px;
    font-family: sans-serif;
}

/* moscow */
.container-header-popup-svg-icon-moscow {
    display: flex;
    align-items: center;
    height: fit-content;
    padding-left: 20px;
}

.popup-icon-moscow {
    margin-right: 10px;
}

.popup-header-moscow {
    border-bottom: 1px solid black;

    font-family: sans-serif;
    font-size: 16px;
}

/* saint-petersburg */
.container-header-popup-svg-icon-saint-petersburg {
    display: flex;
    align-items: center;
    height: fit-content;
    padding-left: 20px;
    margin-bottom: 20px;
}

.popup-icon-saint-petersburg {
    margin-right: 10px;
}

.popup-header-saint-petersburg {
    border-bottom: 1px solid black;

    font-family: sans-serif;
    font-size: 16px;
}

/* down header navigation */
.header-nav-text {
    display: inline-block;
    margin-right: 40px;

    color: white;
    font-size: 18px;
    font-family: sans-serif;

    transition: 0.3s ease;

    cursor: pointer;
}

.header-nav-text:hover {
    color: #c8b17a;
    transition: 0.3s ease;
}

.down-number-phone {
    display: inline-block;
    margin-right: 40px;

    color: white;
    font-size: 28px;
    font-family: sans-serif;

    transition: 0.3s ease;

    cursor: pointer;
}

.down-number-phone:hover {
    transition: 0.3s ease;
    color: #c8b17a;
}

.hover-phone {
    transition: 0.3s ease;
    color: #c8b17a;
}

/* hamburger menu */
.container-header-hamburger {
    display: flex;
    justify-content: center;
    align-items: center;

    border-left: 1px gray solid;
    height: 152px;
    width: 160px;
}

JS：

const containerHeaderUpperEl = document.querySelector('.container-header-upper');
const headerCityEl = document.querySelector('.header-city');
const containerHeaderPopupChangeCityEl = document.querySelector('.container-header-popup-change-city');

const expandWindow = () => {
    containerHeaderPopupChangeCityEl.classList.add('active');
}
if (containerHeaderUpperEl.addEventListener('click', expandWindow) || headerCityEl.addEventListener('click', expandWindow));

const collapseWindow = () => {
    containerHeaderPopupChangeCityEl.classList.remove('active');
}
document.addEventListener('click', (event) => {
    const click = event.composedPath().includes(containerHeaderPopupChangeCityEl);
    console.log(click);
    if (!click) {
        collapseWindow();
    }
});

1 个回答

Voted

stylok · Answer 1 · 2023-10-10T04:41:14Z

根据方法的不同，可能有多种解决方案，但我会尝试简化，或者更确切地说，将您的 js 代码替换为可用的代码。您将需要closest() contains() 和toggle()：

const containerHeaderPopupChangeCityEl = document.querySelector('.container-header-popup-change-city');

document.addEventListener('click', (event) => {
    const popup = event.target.closest('.container-header-popup-change-city');
    // если это клик по 'header-city'
    if(event.target.classList.contains('header-city')) {
        containerHeaderPopupChangeCityEl.classList.toggle('active');
    // если клик мимо popup, а он активен
    } else if(!popup && containerHeaderPopupChangeCityEl.classList.contains('active') ) {
        containerHeaderPopupChangeCityEl.classList.remove('active'); // или .toggle('active') по вкусу
    // если клик внутри popup,.. обработать на своё усмотрение
    } else if(popup) {
        alert('Ура. Вы попали в Popup');
    // а это на случай если что-нибудь ещё придумаете.)
    } else {
        console.log('любой другой клик кроме вышеупомянутых')
    }
});

点击页面任意区域时无法关闭模态窗口

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

点击页面任意区域时无法关闭模态窗口

1 个回答

相关问题