1

$(document).ready(function() {
  PopUpHide();
});

function PopUpShow() {
  $("#popup1").show();
}

function PopUpHide() {
  $("#popup1").hide();
}
.popcontainer {
  background-image: url("https://drive.google.com/uc?export=view&id=1KP4m28sOrLOQfJR-0DuJc8XzPyRKv9I9");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  width: 100%;
  height: 400px;
  margin: 0px auto;
  padding: 0;
}

.pop {
  text-align: center;
  cursor: pointer;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: 0.3s linear;
}

.poptext {
  height: 100%;
  color: transparent;
  transition: 0.3s linear;
  padding-top: 9rem;
}

.poptext:hover {
  color: white;
}

.poptext p {
  letter-spacing: 1px;
  font-size: 30px;
  font-weight: 700;
  font-family: 'PTF55F';
  margin: 0;
}

.poptext span {
  margin-top: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Segoe UI';
}

.popcontainer:hover .pop {
  /* filter: grayscale(100%); */
  background: rgba(0, 0, 0, 0.7);
  /* background: grayscale(100%); */
}

.b-popup {
  width: 100%;
  display: block;
  min-height: 100%;
  background-color: black;
  overflow: auto;
  position: fixed;
  top: 0px;
  left: 0;
  z-index: 1;
  padding-left: 15rem;
  padding-right: 15rem;
  /* display: block;
     padding-left: 15rem;
     padding-right: 15rem;
     z-index: 1;
     overflow: auto;
     position: fixed; */
}

@media screen and (max-width: 1500px) {
  .b-popup {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media screen and (max-width: 400px) {
  .b-popup {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.b-popup .row {
  background: gray;
  margin-top: 5rem;
  text-align: center;
}

.img.col {
  background-image: url("https://drive.google.com/uc?export=view&id=1KP4m28sOrLOQfJR-0DuJc8XzPyRKv9I9");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: -2rem;
  margin-bottom: -2rem;
}

@media screen and (max-width: 650px) {
  .img.col {
    height: 22rem;
  }
}

.background.col-sm {
  background-color: #deddd9;
  padding-right: 0;
  padding-bottom: 2rem;
  padding-top: 0rem;
}

@media screen and (max-width: 500px) {
  .background.col-sm {
    padding-right: 1rem;
  }
}

.text.col {
  background-color: white;
  padding: 5rem;
  text-align: left;
  font-size: 14px;
  font-family: 'PTF55F';
  line-height: 2rem;
  /* height: 100%; */
  margin-top: -2rem;
  /* position: absolute; */
}

@media screen and (max-width: 1024px) {
  .text.col {
    padding: 1rem;
  }
}

@media screen and (max-width: 400px) {
  .text.col {
    margin-top: -4rem;
  }
}

.text.col h2 {
  font-family: 'PTF55F';
  letter-spacing: 1px;
  font-weight: normal;
}

.text.col h6 {
  letter-spacing: 1px;
  font-size: 10px;
  text-transform: uppercase;
  color: #c58a52;
  font-weight: normal;
  padding-bottom: 2rem;
}

.b-popup-close a {
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 2px;
  color: #85714C;
  cursor: pointer;
  float: right;
  padding: 10px 30px;
}

.b-popup-close a:after {
  content: "\274c";
  font-size: 14px;
  color: #85714C;
  margin-left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:PopUpShow()">
  <div class="popcontainer">
    <div class="pop">
      <div class="poptext">
        <p>Oliver Voogt</p>
        <span>коммерческий директор </span>
      </div>
    </div>
  </div>
</a>
<div class="b-popup" id="popup1">
  <div class="b-popup-close">
    <a href="javascript:PopUpHide()">close</a>
  </div>
  <div class="row">
    <div class="img col">
    </div>
    <div class="background col-sm">
      <h2></h2>
      <div class="row">
        <div class="text col">
          <h2>Oliver Voogt</h2>
          <h6>коммерческий директор</h6>
          Почему он используется? Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв
          и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и
          пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...</div>
      </div>
    </div>
  </div>
</div>

Ползунок появляется, но не до конца скроллится окно в режиме мобильного. В некоторых разрешениях ползунка совсем нет

1 ответ 1

0

так нужно было? правки в css отметил комментами

$(document).ready(function(){
    PopUpHide();
});
function PopUpShow(){
    $("#popup1").show();
}
function PopUpHide(){
    $("#popup1").hide();
}
.popcontainer {
     background-image: url("https://drive.google.com/uc?export=view&id=1KP4m28sOrLOQfJR-0DuJc8XzPyRKv9I9");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: 50% 50%;
     width: 100%;
    height: 400px;
     margin:0px auto;
     padding:0;
 }
    .pop {
        text-align: center;
        cursor: pointer;
        width: 100%;
        height: 100%;
        box-sizing:border-box;

        transition: 0.3s linear;
     }
     .poptext {
         height: 100%;
         color: transparent;
         transition: 0.3s linear;
         padding-top: 9rem;
     }
     .poptext:hover {
        color: white;
    }
 .poptext p {
     letter-spacing: 1px;
     font-size: 30px;
     font-weight: 700;
     font-family: 'PTF55F';
     margin: 0;
    }
    .poptext span {
    margin-top: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Segoe UI';
     }

 .popcontainer:hover .pop {
     /* filter: grayscale(100%); */
     background: rgba(0,0,0,0.7);
     /* background: grayscale(100%); */
 }
 .b-popup {
     /*width: 100%;*/ /*закомментировал это*/
     display: block;
    min-height: 100%;
    background-color: black;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0; /*добавил вот это. т.к. position fixed, нужно указать нижнюю границу*/
     z-index: 1;
     padding-left: 15rem;
     padding-right: 15rem;

     /* display: block;
     padding-left: 15rem;
     padding-right: 15rem;
     z-index: 1;
     overflow: auto;
     position: fixed; */
 }
 @media screen and (max-width: 1500px) {
     .b-popup {
         padding-left: 3rem;
         padding-right: 3rem;
    }
 }
 @media screen and (max-width: 400px) {
    .b-popup {
        padding-left: 2rem;
        padding-right: 2rem;
 }
 }
.b-popup .row {
    background: gray;
    margin-top: 5rem;
    text-align: center;
}
.img.col {
    background-image: url("https://drive.google.com/uc?export=view&id=1KP4m28sOrLOQfJR-0DuJc8XzPyRKv9I9");
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -2rem;
    margin-bottom: -2rem;
}
@media screen and (max-width: 650px) {
    .img.col {
    height: 22rem;
    }
}
.background.col-sm {
    background-color: #deddd9;
    padding-right: 0;
  padding-bottom: 2rem;
  padding-top: 0rem;
}
@media screen and (max-width: 500px) {
    .background.col-sm {
        padding-right: 1rem;
 }
}
.text.col {
    background-color: white;
    padding: 5rem;
    text-align: left;
    font-size: 14px;
    font-family: 'PTF55F';
    line-height: 2rem;
    /* height: 100%; */
    margin-top: -2rem;
    /* position: absolute; */
}
@media screen and (max-width: 1024px) {
    .text.col {
        padding: 1rem;
 }
}
@media screen and (max-width: 400px) {
    .text.col {
        margin-top: -4rem;
 }
}
.text.col h2 {
font-family: 'PTF55F';
letter-spacing: 1px;
font-weight: normal;

}
.text.col h6 {
letter-spacing: 1px;
font-size: 10px;
text-transform: uppercase;
color: #c58a52;
font-weight: normal;
padding-bottom: 2rem;
}
.b-popup-close a {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    color: #85714C;
    cursor: pointer;
    float: right;
    padding: 10px 30px;
}
.b-popup-close a:after {
 content: "\274c";
 font-size: 14px;
 color: #85714C;
 margin-left: 10px;
}
<a href="javascript:PopUpShow()">
    <div class="popcontainer">
        <div class="pop">
            <div class="poptext">
            <p>Oliver Voogt</p>
            <span>коммерческий директор </span>
            </div>
        </div>
     </div>
</a>


<div class="b-popup" id="popup1">
    <div class="b-popup-close">
           <a href="javascript:PopUpHide()">close</a> 

    </div>
       <div class="row">
       <div class="img col">
       </div>
                      <div class="background col-sm"><h2></h2>
                      <div class="row">
                         <div class="text col"><h2>Oliver Voogt</h2><h6>коммерческий директор</h6>Почему он используется?
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...</div> 
                      </div>
           
       </div>
       
   </div>

</div>

2
  • Именно так ))))
    – Aleksus
    Commented 10 авг. 2020 в 8:04
  • рад был помочь :)
    – rabbit
    Commented 10 авг. 2020 в 11:19

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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