0

При нажатии кнопки Заказать звонок у меня появляется окно с обратной связью, но сбиваются стили для .popup и я не понимаю почему. Для .popup я задал display: flex; justify-content: center; align-items: center, чтобы .popup-wrapper встал посередине. Для того, чтобы скрыть .popup я в медиазапросах просписал .popup { display: none; }, так как свойство display было уже занято. Вроде как все норм, но при повторном вызове окна,обнуляется свойство display: flex для .popup, а если выставить display: flex !important, то начинаются глюки: при закрытии окна оно появляется снова.

$(document).ready(function(){
  $('.request').click(function(event) {
    $('.popup').fadeIn();
  });

  $('.popup-close').click(function(event) {
      $('.popup').fadeOut();
  });

  $(".owl-carousel").owlCarousel({
      autoplay:true,
      slideSpeed: 9000,
      loop:true,
      nav: true,center:true,
      dots: true,
      responsiveClass:true,
      smartSpeed:400,
      margin:0,
      responsive:{
          0:{
              items:1,
              margin:0
          },
          800:{
              items:1
          },
          1100:{
              items:1
          },
          2000:{
              items:1
          }
      }
  });

});
html,body {
  width: 100%;
  height: 100%;
  line-height: 1.5;
  font-weight: 300;
  font-family: 'Open Sans Light', arial;
}
.wrapper {
  overflow-x: hidden;
  height: 100vh;
}

.content {
  margin-left: 310px;
  position: relative;
}

button {
  cursor: pointer;
}

/*section main*/


.info {

  position: absolute;
  bottom: 120px;
  left: 80px;
  z-index: 70;
  padding: 20px;

}

.info-text {
  background-color: rgba(0, 0, 0, 0.4);
  padding: 20px;
  margin-bottom: 10px;
}

.info-text h2 {
  font-family: 'Noto Sans', arial;
  font-size: 48px;
  line-height: 56px;
  font-weight: 400;
  text-transform: uppercase;
  color: #f0f0f0;

}
.info-text p {
  font-family: 'Noto Sans', arial;
  font-size: 26px;
  line-height: 56px;
  font-weight: 400;
  text-transform: uppercase;
  color: #f0f0f0;
}
.info-button {
  background-color: #b36060;
  font-family: Lora;
  font-size: 18px;
  line-height: 14px;
  font-weight: 400;
  font-style: italic;
  color: #fefefe;
  padding: 15px;
  cursor: pointer;
  border: none;
}

.info-button:hover {
    outline: 2px solid white !important;
    
}

.arrow {
  margin-left: 50px;
}
/*sidebar*/
.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: fixed;
  z-index: 80;
  left: 0;
  top: 0;
  height: 100%;
  width: 310px;
  background: #5b5858 url(../img/menu_bg.jpg) center repeat;
  padding-left: 30px;
}
.logo {
  width: 245px;
  height: 76px;
  border: 3px solid rgba(197, 120, 64, 0.65);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo h1 {
  font-family: Georgia, serif;
  font-size: 44px;
  line-height: 15px;
  font-weight: 400;
  text-transform: uppercase;
  color: #f4f4f4;
}
.logo span {
  position: absolute; 
  transform: translate(-15%, 80%);
  background: url(../img/menu_bg.jpg);
  font-family: Georgia, serif;
  padding: 0 5px;
  font-size: 14.2px;
  line-height: 1.2;
  font-weight: 400;
  text-transform: uppercase;
  color: #f5f5f5;
  line-height: 24px;
}
.desc p {
  text-align: justify;
  letter-spacing: 1.4px;
  width: 245px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  color: #aaa9a9;
  margin-top: 30px;
}
.menu-main {
  margin-bottom: 70px;
}
.menu-main ul li:nth-child(2):before {
  display: flex;
  align-items: center;
  justify-content: center;
  content: '1';
  color: #fff;
  font-size: 12px;
  width: 35px;
  height: 35px;
  background: url(../img/rectangle.svg) center no-repeat;
  float: right;
  margin-top: 2px;
}
.menu-main ul li a {
  font-size: 14px;
  line-height: 42px;
  font-weight: 400;
  text-transform: uppercase;
  color: #f7f7f7;
  padding-left: 30px;
}
.menu-main ul li a:hover {
  color: #ff7200;
  transition: 0.3s;
}
.menu-main li {
  border-bottom: 1px solid #686464;
  margin-left: -30px;
}

.menu-sub ul li a {
  font-size: 14px;
  line-height: 32px;
  font-weight: 300;
  color: #bdbdbd;
}
.menu-sub ul li a:hover {
  color: #fff;
  transition: 0.3s;
}
.contact a.phone {
  display: block;
  font-size: 20px;
  line-height: 18px;
  font-weight: 300;
  text-transform: uppercase;
  color: #fefefe;
  margin-bottom: 7px;
}
.contact a.request {
  font-size: 16px;
  line-height: 28px;
  text-transform: none;
  color: #c57c40;
  border-bottom: 1px dashed #c57c40;
  transition: 0.3s;
}
.contact a.request:hover {
  color: #fff;
  transition: 0.3s;
  border-bottom: 1px solid #fff;
}
/*Slider*/


.img {
  height: 100vh;
  max-width: 100vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
} 

.owl-nav {
  display: none;
}

.owl-dots {
  position: absolute;
  bottom: 50px;
  left: 100px;
}

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

.owl-dot.active {
  transform: scale(1.8);
  transition: 0.4s;
}

/*Popup*/
.popup{
    display: flex !important;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.popup-wrapper {
  display: flex;
  width: 980px;
  background-color: #f2f2f2;
   
}

.popup-form {
  width: 100%;
  padding: 50px;
  position: relative;
}

.popup-img img  {
  min-height: 100%;
  margin-right: 40px;
}


.form-input {
  margin-bottom: 20px;
  width: 100%;
}


.popup-form h3 {
  margin-bottom: 30px;
}

.popup-form input {
  width: 100%;
  padding: 10px 0;
  border: none;
  text-align: center;
  font-size: 15px;
}
 

.popup-form  p {
  margin-bottom: 10px;
}

.popup-form input:focus, .popup-form textarea:focus {
  border: 1px solid #b75d5d;
}

.popup-form textarea {
  width: 100%;
  resize: none;
  border: none;
  font-size: 15px;
}


.popup h3 {
  font-family: 'Noto Sans', arial;
  font-size: 24px;
  line-height: 24px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.095em;
  color: #4a4a4a;
}

.popup sup {
  color: #b25252;
   font-size: 14px;
}

.popup p {

  font-family: 'Fira Sans', sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: #716d6d;
}

.popup-form button.send {
  float: right;
  margin-right: -5px;
  border: none;
  padding: 10px 60px;
  background-color: #db7d3a;
  border-radius: 2px;
  font-family: Lora;
  font-size: 14px;
  line-height: 18px;
  font-weight: 100;
  font-style: italic;
  color: #ffffff;
  letter-spacing: 1.2px;
}


.popup-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 4rem;
  text-align: center;
  border: none;
  background-color: transparent;
  color: #796454;
  font-size: 50px;
  cursor: pointer;
}

@media screen and (min-width: 200px) {
  .popup {
    display: none;
  }
}
<!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">
    <link href="https://allfont.ru/allfont.css?fonts=open-sans-light" rel="stylesheet">
     <link href="https://allfont.ru/allfont.css?fonts=noto-sans" rel="stylesheet" type="text/css" />
    <link href="//db.onlinewebfonts.com/c/7dca09e227fdfe16908cebb4244589e4?family=Georgia" rel="stylesheet" type="text/css"/>
    <link href="owl.carousel.min.css" rel="stylesheet" type="text/css" />
    <script src="js/script.js"></script>
    <script src="owl.carousel.min.js" type="text/javascript"></script>
    <script src="https://kit.fontawesome.com/8e0bceeac7.js" crossorigin="anonymous"></script>
    <title>Сияние - Декор центр</title>
</head>
<body>
    
    <div class="popup">

        <div class="popup-wrapper">
            
            <div class="popup-img">

                <img src="img/popup_img.jpg" alt="">
            </div>

            <div class="popup-form">
                <button class="popup-close">&times;</button>
                <h3>обратная связь</h3>
                <form action="mail.php" method="POST">
                    <div class="form-input">
                        <p>E-mail <sup>*</sup></p>
                    <input type="email" name="user_email">
                    </div>
                    
                    <div class="form-input">
                        <p>Телефон <sup>*</sup></p>
                        <input type="tel" name="user_phone">
                    </div>
                    
                    <div class="form-input">
                        <p>Сообщение</p>
                        <textarea name="popup-message" id="popup-message" cols="30" rows="10"></textarea>
                    </div>
                    
                     <button class="send" type="submit">Отправить</button>
                </form>

            </div>
            
        </div>
    </div>
    <div class="wrapper">
        <div class="sidebar">
            
                <div class="top-content">
                    <div class="logo">
                        <a href="#">
                            <h1>сияние</h1>
                            <span>декор центр</span>
                        </a>
                    </div>
                        <div class="desc">
                            <p>Интернет-магазин отделочных материалов и дизайна</p>
                        </div>
                    
                </div>

                <div class="menu">

                    <div class="menu-main">
                        <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>
                            <li><a href="">контакты</a></li>
                        </ul>
                    </div>

                    <div class="menu-sub">
                        <ul>
                            <li><a href="#">О компании</a></li>
                            <li><a href="#">Отзывы о нас</a></li>
                            <li><a href="#">Доставка и оплата</a></li>
                            <li><a href="#">Дизайнеры</a></li>
                        </ul>
                    </div>
                </div> 
                <div class="contact">
                    <a href="tel:+78005118909" class="phone">+7 (4822) 648-080</a>
                    <a href="#" class="request">Заказать звонок</a>
                </div>
            
        </div>

        <div class="content">
            <div class="gallery">
                <div class="owl-carousel">
                    
                    <div class="img" style="background-image: url(img/bg-1.jpg);" class="div"></div>
                    <div class="img" style="background-image: url(img/bg-2.jpg);" class="div"></div>
                    <div class="img" style="background-image: url(img/bg-3.jpg);" class="div"></div>
                    <div class="img" style="background-image: url(img/bg-4.jpg);" class="div"></div>
                </div>
            </div>

            <div class="info">
                <div class="info-text">
                    <h2>Декоративные покрытия</h2>
                    <p>от лучших производителей</p>
                </div>
                <button class="info-button">Подробнее <span class="
arrow">&rarr;</span> </button>
            </div>

        </div>

    
        
    </div>

</body>
            
</html>
    
 

введите сюда описание изображения

1
  • 1
    ну так где fadeIn - допиши, чтобы флекс ставился 18 окт 2020 в 20:56

1 ответ 1

0
  $('.request').click(function(event) {
    $('.popup').css({display:'flex'}).hide().fadeIn();
  });

Ваш ответ

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

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