具有非均匀背景的块内的渐变边框

Question

Tempest

Asked:2020-09-02 06:05:45 +0000 UTC2020-09-02 06:05:45 +0000 UTC 2020-09-02 06:05:45 +0000 UTC

如何使两个弹出窗口在活动上相互重叠？

772

有一个响应式 .mobmenu 菜单和一个 .feedback.openform 反馈按钮。如何让当你点击汉堡时，深色背景的菜单会覆盖反馈按钮，使其无法点击？相反，点击反馈表时，无法调出自适应菜单。我有点管理菜单，但这里是如何将反馈完全带到前台，同时让带有汉堡包的标题向后移动？[ j][1]

$(".mobmenu").click(function(event) {
        $(".menu").toggleClass('show');
        $(this).toggleClass('open');
        $(".bg").toggleClass('show');
    });

    $(".feedback").click(function(e) { 
        $(".bg").toggleClass('show');  
        $(".bgform").toggleClass('show'); 
        $(this).toggleClass('open'); 
    });

html, body {
    width: 100%;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
    font-weight: 300;
}

h1, h2 {
    font-size: 32px;
    font-weight: 300;
    margin-bottom: 5px!important;
    
}


a {
    color:#202020;
    text-decoration: none;
}

.wrapper {
    max-width: 1400px;
    width: 100% ;
    margin: 0 auto 0 auto;
    padding: 0 60px 0 60px;
    box-sizing: border-box;
}

.header {
    background-color: black;
    padding: 10px 0;
    margin-bottom: 60px;
}

.menu {
    margin-left: 60px;
}

.menu ul li {
    display: inline-block;
}


.menu ul li:last-child {
    margin-right: 0;
}

.menu ul li a {
    color: #fff;
    margin-right: 20px;
}

.header .logo {
    display: block;
    width: 180px;
}

.header .wrapper {
    display: flex;
    align-items: center;
    
}

.sidebar {
    width: 300px;
    height: 300px;
    float: left;
    background-color: grey;
    margin-bottom: 60px;
}

.sidebar.single {
    height: auto;
    background: 0;
}
    

.content {
    margin-left: 340px;
    margin-bottom: 60px;
}

.submenu ul li {
    display: inline-block;
}

.submenu {
    margin-bottom: 20px;
}

.submenu ul li a {
    color: #CCC;
    margin-right: 10px;
}

.content p {
    text-align: justify;
    margin-bottom: 20px;
}

.catalog {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: -30px;
    margin-right: -30px;
}

.catalog .item {
    height: 220px;
    margin: 30px;
    position: relative;
    line-height: 1;
    cursor: pointer;
    transition: filter 0.3s;
}

.catalog.grid .item {
    width: calc(100%/3 - 60px);
}

.catalog.list .item {
    display: flex;
    height: auto;
    align-items: center;
    width: 100% ;

}

.catalog.list .col {
    position: relative;
    width: 50%;
}

.catalog.list .item img {
    width: 50%;
    margin-bottom: 0;
    margin-right: 40px!important;
}



.catalog.list .title {
    margin-bottom: 40px;
}



.catalog .item img {
    width: 100%;
    margin-bottom: 20px;
    filter: grayscale(100);
}

.catalog .item:hover img {
    filter: grayscale(0);
    transition: filter 0.3s;
}


.catalog.list .title {
    margin-bottom: 40px;
}

.catalog .item .desc, .catalog .item .price {
    position: absolute;
    bottom: 0;
}

.catalog .item .desc {
    left: 0;
}

.catalog .item .price {
    font-size: 20px;
    font-weight: 500;
    right: 0;
}

.catalog .item .desc {
    font-size: 15px;
}

.catalog .item span {
    display: block;
}

.catalog .item .title {
    font-size: 20px;
    font-weight: 500;
}

.catalog .item:hover .title {
    color: orange;
    transition: color 0.3s;
}

.icons {
    text-align: right;

}

.icons i {
    font-size: 30px;
    margin-right: 15px;
    opacity: 0.5;
    cursor: pointer;
}

.icons i:last-child {
    margin-right: 0;
}

.icons i.active {
    opacity: 1;
}

.mobmenu {
    width: 100%;
    display: none;
    color: #fff;
    text-align: right;
    z-index: 999;
    cursor: pointer;
}

.fas.fa-times {
    display: none;
}

.open .fas.fa-bars {
    display: none;
}

.open .fas.fa-times {
    display: block;
}



.showroom {
    text-align: center;
    background: url(../img/showroom.jpg) center no-repeat;
    background-size: cover;
    color: #fff;
    padding: 60px 0;
}
    

.showroom p {
    margin-bottom: 40px;
}

.contact {
    width: 300px;
    background-color: black;
    color: #fff;
    position: absolute;
    margin-top: 60px;
    padding: 30px;
    box-sizing: border-box;
    text-align: center;
}

.map {
    position: relative;
}



.footer .wrapper {
    margin-top: -500px;
}

.contact p.big {
    font-size: 25px;
    margin-bottom: 20px;
}

.contact p  {
    margin-bottom: 20px !important;
    font-size: 15px;
}

.contact a {
    color: orange;
}

p.small {
    font-size: 12px;
}



.owl-nav {
    position: relative;
    top: 30px;
}


.owl-prev, .owl-next {
    position: absolute;
}
    


.owl-prev {
    left: 0;
    background: 0;
}

.owl-next {
    right: 0;
    background: 0;
}

.owl-dots {
    margin-top: 30px;
    text-align: center;
}

.owl-dot {
    height: 15px;
    width: 15px;
    background-color: #FFF;
    border-radius: 15px;
    display: inline-block;
    margin: 0 5px 0 5px;
    transition: 0.3s;
}

.owl-dot.active {
    background-color: #f7971d;
}

.owl-prev:hover, .owl-next:hover {
    color: #f7971d !important;
    transition: 0.3s;
}

.gallery .owl-item.active.center {
    transform: scale(1)!important;
    transition: 0.6s;
}
.gallery .owl-item {
    transform: scale(0.8)!important;
}

.features tr {
    border-bottom: 1px dotted grey;
    cursor: pointer;

}

.features tr td {
    padding: 10px 40px;
}

.features td:first-child {
    font-weight: 500;
}

.features tr:hover {
    background-color: #f7f7f7;
}




.gallery .img {
    margin-bottom: 20px;
    height: 240px;
    background-size: contain;
    background-repeat: no-repeat;
     background-position: center center;
}

.photos {
    display: flex;
    flex-wrap: wrap;
}

.photos a {
    width: calc(100%/3);
    padding: 5px;
    box-sizing: border-box;
    transition: 0.3s;
}

.photos img {
    width: 100%;
}

.photos a:hover {
    transform: scale(1.1);
}

.mobgall {
    display: none !important;
}

.bg {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: black;
    opacity: 0;
    z-index: -1;
    transition: 0.3s;
}


    
.bgform {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1;
    transition: 0.3s; 
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
}

.bgform.show {
    opacity: 1;
    z-index: 100;
}

.bg.show {
    opacity: 0.7;
    z-index: 98;
}


.feedback {
    position: fixed;
    bottom: 30px;
    right: 30px;
    font-size: 30px;
    color: #ffff;
    background-color: black;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    cursor: pointer;
    z-index: 80;
}

.feedback.open {
    z-index: 999;
}

@media(max-width: 1400px) {
    .sidebar, .contact {
        width: 250px;
    }

    .content {
        margin-left: 290px;
    }

    .wrapper {
        padding: 0 30px 0 30px !important;

    }

}


@media(max-width: 1200px) {
    .catalog.grid .item {
        width: calc(100%/2 - 60px);
    }

    
}


@media(max-width: 850px) {
    .sidebar {
        display: none;
    }
        
    .features {
        margin: 30px auto 0 auto ;
        
    }

    .mobgall {
        display: block !important;
    }

    .mobgall .owl-dot {
        background-color: black;
    }

    .mobgall .owl-dot.active {
        background-color: orange;
    }

    .mitem {
        height: 270px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: #f4f4f4;
    }

    .features tr td {
        padding: 5px 15px;
    }   
    .content {
        margin-left: 0;
        padding-top: 100px;
    }

    .mobmenu {
        display: block;
        
    }


    .menu {
        position: fixed;
        top: 0;
        right: -200px;
        background-color: black;
        margin-left: 0;
        width: 200px;
        padding: 30px;
        box-sizing: border-box;
        transition: 0.3s;
        z-index: 999 !important;
    }

    .menu.show {
        right: 0;
    }


    .menu ul li {
        display: block;
        margin-bottom: 20px;
    }

    .menu ul li:last-child {
        margin-bottom: 0;
    }

    .header {
        position: fixed;
        width: 100%;
        z-index: 99;
    }


}


@media(max-width: 600px) {
    .icons {
        display: none;
    }

    .catalog.grid .item {
        width: 100%;
        height: auto;

    }

    .catalog .item img {
        filter: grayscale(0);
    }

    .catalog .item .desc, .catalog .item .price {
        position: relative;
    }

    .catalog .item .title, .catalog .item .desc {
        margin-bottom: 20px;
    }

    .footer .wrapper {
        margin: 0;
    }

    .contact {
        width: auto;
        margin-top: 0;
        margin-left: -30px;
    }

    .map {
        height: 350px;
    }

    .features {
        font-size: 85%;
    }
}



@media(max-width: 330px) {
    

     a.logo img {
        position: relative;
        transform: translateX(-20%);
    }
        
        
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/clear.css">
    <link rel="stylesheet" href="css/adaptive.css">
    <title>Pornohub</title>
    <script src="js/script.js"></script>
    <link href="owl.carousel.min.css" rel="stylesheet" type="text/css" />
    <script src="owl.carousel.min.js" type="text/javascript"></script>
    
    <link href="img/favicon.png" rel="shortcut icon" type="image/x-icon" />
    <script src="https://kit.fontawesome.com/8e0bceeac7.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,700,800,900&display=swap" rel="stylesheet">
</head>
<body>

    <div class="header">
        <div class="wrapper">
            <a class="logo" href="index.html"><img src="img/logo.svg" alt="logo"></a>
            <div class="menu">
                <ul>
                    <li><a href="#">Гитары</a></li>
                    <li><a href="#">Бас-Гитары</a></li>
                    <li><a href="#">Усиление</a></li>
                    <li><a href="#">Эффекты</a></li>
                    <li><a href="#">О нас</a></li>
                </ul>
            </div>
            <div class="mobmenu"><i class="fas fa-bars"></i><i class="fas fa-times"></i></div>
        </div>
    </div>
        <div class="bg"></div>
    <div class="wrapper">
        <div class="sidebar">
            
        </div>
        <div class="content">
            <h1>Гитары</h1>
            <div class="submenu">
                <ul>
                    <li><a href="#">Все бренды</a></li>
                    <li><a href="#">BC Rich</a></li>
                    <li class="active">Charvel<a href="#"></a></li>
                    <li><a href="#">Danelectro</a></li>
                    <li><a href="#">ESP</a></li>
                    <li><a href="#">Fender</a></li>
                    <li><a href="#">Squier</a></li>
                    <li><a href="#">Fernandes</a></li>
                    <li><a href="#">Burny </a></li>
                    <li><a href="#">G&L</a></li>
                    <li><a href="#">Gibson</a></li>
                    <li><a href="#">Orville</a></li>
                    <li><a href="#">Godin</a></li>
                    <li><a href="#">Greco</a></li>
                    <li><a href="#">Gretsch</a></li>
                    <li><a href="#">Ibanez</a></li>
                    <li><a href="#">Jackson</a></li>
                    <li><a href="#"> Music Man/Ernie Ball</a></li>
                    <li><a href="#">PRS</a></li>
                </ul>
            </div>
            
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, quibusdam. Praesentium dolorem ea aperiam voluptas officiis minus eos voluptate, eligendi unde, assumenda delectus laudantium nisi, debitis consequuntur ullam id ex rerum, tempora in repellat neque saepe officia numquam sequi?</p>

            <div class="icons"><i class="fas fa-th grid active"></i><i class="fas fa-bars list"></i></div>


            <div class="catalog grid">
                
            <a href="single.html" class="item">

            <img src="img/guitar.png">

            <div class="col">
                
            <span class="title">Fender Telecaster TL71</span>

            <span class="desc">Japan 1994</span>
            <span class="price">29 000 ₽</span>
            </div>
            </a>
                
            <a href="single.html" class="item">

            <img src="img/guitar.png">

            <div class="col">
                
            <span class="title">Fender Telecaster TL71</span>

            <span class="desc">Japan 1994</span>
            <span class="price">29 000 ₽</span>
            </div>
            </a>

            <a href="single.html" class="item">

            <img src="img/guitar.png">

            <div class="col">
                
            <span class="title">Fender Telecaster TL71</span>

            <span class="desc">Japan 1994</span>
            <span class="price">29 000 ₽</span>
            </div>
            </a>

            <a href="single.html" class="item">

            <img src="img/guitar.png">

            <div class="col">
                
            <span class="title">Fender Telecaster TL71</span>

            <span class="desc">Japan 1994</span>
            <span class="price">29 000 ₽</span>
            </div>
            </a>

            <a href="single.html" class="item">

            <img src="img/guitar.png">

            <div class="col">
                
            <span class="title">Fender Telecaster TL71</span>

            <span class="desc">Japan 1994</span>
            <span class="price">29 000 ₽</span>
            </div>
            </a>

            <a href="single.html" class="item">

            <img src="img/guitar.png">

            <div class="col">
                
            <span class="title">Fender Telecaster TL71</span>

            <span class="desc">Japan 1994</span>
            <span class="price">29 000 ₽</span>
            </div>
            </a>    
                


            </div> 
                    
                        
                
            </div>
        </div>

        
    </div>

    <div class="showroom">
        <div class="wrapper">
            <h2>Приходите к нам!</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla justo tortor, dapibus et varius nec, iaculis nec sem. In dictum vel est sed tincidunt. Duis sagittis volutpat dui. Nulla ut fermentum sapien, ac faucibus arcu. Curabitur aliquet ultricies elit, vitae egestas ipsum tincidunt in.</p>

            <div class="gallery">
                
            <ul class="owl-carousel">   
            <li><div class="img" style="background-image: url(https://img2.goodfon.ru/wallpaper/nbig/4/a7/studio-midi-guitar.jpg);"></div><span>Наш магазин</span></li>
            <li><div class="img" style="background-image: url(https://www.jasonstallworth.com/wp-content/uploads/2019/07/Home-Recording-Studio-Guide-Metal-Guitarists.jpg);"></div><span>Наш магазин</span></li>
            <li><div class="img" style="background-image: url(https://img2.goodfon.ru/wallpaper/nbig/4/a7/studio-midi-guitar.jpg);"></div><span>Наш магазин</span></li>
            <li><div class="img" style="background-image: url(https://www.jasonstallworth.com/wp-content/uploads/2019/07/Home-Recording-Studio-Guide-Metal-Guitarists.jpg);"></div><span>Наш магазин</span></li>
            <li><div class="img" style="background-image: url(https://img2.goodfon.ru/wallpaper/nbig/4/a7/studio-midi-guitar.jpg);"></div><span>Наш магазин</span></li>
            <li><div class="img" style="background-image: url(https://www.jasonstallworth.com/wp-content/uploads/2019/07/Home-Recording-Studio-Guide-Metal-Guitarists.jpg);"></div><span>Наш магазин</span></li>

            </ul>  
                
            </div> 
            
            
        </div>

        
    </div>

    

    <div class="footer">
        <div class="map"><script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Ad80f59a6d32f7a6317b3192bb68df1d817ddc14bface4593cc7295640f3a9501&amp;width=100%&amp;height=500&amp;lang=ru_RU&amp;scroll=true"></script></div>
        <div class="wrapper">
            <div class="contact">
                <p class="big">Звоните, пишите,не скучайте :)</p>

                <p><a href="mailto:info@guitarbank.ru">info@guitarbank.ru</a></p>

                <p>Наб. реки Фонтанки, 78<br/>
                <a href="tel:79219647422">+7 921 964 7442</a></p>

                
                <p class="small">Отвечаем на звонки и сообщения ежедневно с 12:00 — 20:00. Чтобы посетить Guitarbank — позвоните нам заранее, подберем удобное время для встречи.</p>        
            </div>
        </div>
    </div>

    <div class="feedback openform"><i class="fas fa-comments"></i></div>
    <div class="bgform">1</div>

</body>
</html>

1 个回答

Voted

Ein · Answer 1 · 2020-09-02T10:39:31Z

Best Answer

Ein

2020-09-02T10:39:31Z2020-09-02T10:39:31Z

这顶帽子没有隐藏，因为z-index:99。因此，您只需在显示调光时重置此值。

或者，您可以放弃课程

.header.in-shadow {
  z-index: 1;
}

$(".feedback").click(function(e) {
    $(".bg").toggleClass('show');
    $(".bgform").toggleClass('show');
    $('body > .header').toggleClass('in-shadow'); // <---
    $(this).toggleClass('open');
});

jsfiddle.net/qe3pgLrx

4

如何使两个弹出窗口在活动上相互重叠？

如何从列表中打印最大元素（str 类型）的长度？

如何在 PyQT5 中清除 QFrame 的内容

如何将具有特定字符的字符串拆分为两个不同的列表？

导航栏活动元素

是否可以将文本放入数组中？[关闭]

如何一次用多个分隔符拆分字符串？

如何通过 ClassPath 创建 InputStream？

在一个查询中连接多个表

对列表列表中的所有值求和

如何对齐 string.Format 中的列？

如何使两个弹出窗口在活动上相互重叠？

1 个回答

相关问题