$(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>
Ползунок появляется, но не до конца скроллится окно в режиме мобильного. В некоторых разрешениях ползунка совсем нет