Это комбинация существующего кода, который я не писал. Я не уверен, почему оверлей не сработает. Смысл в том, чтобы иметь ползунок, запускать модальные при нажатии «site-btn» и открывать модальные с длинным текстовым содержанием. Код начинает работать на первом слайде. Слайд два через четыре не сработает вообще. Градиент находится поверх наложения, если я не удаляю код полностью. z-index не помогает. После нескольких попыток, возиться с css и javascript в течение нескольких дней, я не добился большого прогресса вообще. Мне нужно это выяснить. Я не большой кодер, но я знаю свой путь. Может кто-нибудь сказать мне, что я делаю не так? Вот код:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
function detect_active(){
// get active
var get_active = $("#dp-slider .dp_item:first-child").data("class");
$("#dp-dots li").removeClass("active");
$("#dp-dots li[data-class="+ get_active +"]").addClass("active");
}
$("#dp-next").click(function(){
var total = $(".dp_item").length;
$("#dp-slider .dp_item:first-child").hide().appendTo("#dp-slider").fadeIn();
$.each($('.dp_item'), function (index, dp_item) {
$(dp_item).attr('data-position', index + 1);
});
detect_active();
});
$("#dp-prev").click(function(){
var total = $(".dp_item").length;
$("#dp-slider .dp_item:last-child").hide().prependTo("#dp-slider").fadeIn();
$.each($('.dp_item'), function (index, dp_item) {
$(dp_item).attr('data-position', index + 1);
});
detect_active();
});
$("#dp-dots li").click(function(){
$("#dp-dots li").removeClass("active");
$(this).addClass("active");
var get_slide = $(this).attr('data-class');
console.log(get_slide);
$("#dp-slider .dp_item[data-class=" + get_slide + "]").hide().prependTo("#dp-slider").fadeIn();
$.each($('.dp_item'), function (index, dp_item) {
$(dp_item).attr('data-position', index + 1);
});
});
$("body").on("click", "#dp-slider .dp_item:not(:first-child)", function(){
var get_slide = $(this).attr('data-class');
console.log(get_slide);
$("#dp-slider .dp_item[data-class=" + get_slide + "]").hide().prependTo("#dp-slider").fadeIn();
$.each($('.dp_item'), function (index, dp_item) {
$(dp_item).attr('data-position', index + 1);
});
detect_active();
});
});
</script>
<script type="text/javascript">
var body = document.body,
overlay = document.querySelector('.overlay'),
overlayBtts = document.querySelectorAll('button[class$="overlay"]');
[].forEach.call(overlayBtts, function(btt) {
btt.addEventListener('click', function() {
/* Detect the button class name */
var overlayOpen = this.className === 'open-overlay';
/* Toggle the aria-hidden state on the overlay and the
no-scroll class on the body */
overlay.setAttribute('aria-hidden', !overlayOpen);
body.classList.toggle('noscroll', overlayOpen);
/* On some mobile browser when the overlay was previously
opened and scrolled, if you open it again it doesn't
reset its scrollTop property */
overlay.scrollTop = 0;
}, false);
});
*{
font-family: 'Lato', sans-serif;
}
.dp-wrap {
margin: 0 auto;
position: relative;
perspective: 1000px;
height: 100%;
}
.dp-slider {
height: 100%;
width: 100%;
position: absolute;
transform-style: preserve-3d;
}
.dp-slider div {
transform-style: preserve-3d;
}
.dp_item {
display: block;
position: absolute;
text-align: center;
color: #FFF;
border-radius: 10px;
transition: transform 1.2s;
}
.dp-img img {
border-left: 1px solid #fff;
}
#dp-slider .dp_item:first-child {
z-index: 10 !important;
transform: rotateY(0deg) translateX(0px) !important;
}
.dp_item[data-position="2"] {
z-index: 9;
transform: rotateY(0deg) translateX(10%) scale(0.9);
}
.dp_item[data-position="3"] {
z-index: 8;
transform: rotateY(0deg) translateX(20%) scale(0.8);
}
.dp_item[data-position="4"] {
z-index: 7;
transform: rotateY(0deg) translateX(30%) scale(0.7);
}
#dp-next,
#dp-prev {
position: absolute;
top: 50%;
right: 16%;
height: 33px;
width: 33px;
z-index: 10;
cursor: pointer;
}
#dp-prev {
left: 15px;
transform: rotate(180deg);
}
#dp-dots {
position: absolute;
bottom: 25px;
z-index: 12;
left: 38%;
cursor: default;
}
#dp-dots li {
display: inline-block;
width: 13px;
height: 13px;
background: #ffff;
border-radius: 50%;
}
#dp-dots li:hover {
cursor: pointer;
background: #FA8C8C;
transition: background .3s;
}
#dp-dots li.active {
background: #FA8C8C;
}
.dp_item {
width: 85%;
}
.dp-content ,
.dp-img {
text-align: left;
}
.dp_item {
display: flex;
align-items: center;
background: #fff;
border-radius: 10px;
overflow: hidden;
border-top: 5px solid #FA8C8C;
}
.dp-content {
padding-left: 100px;
padding-right: 0;
display: inline-block;
width: 100%;
}
.dp-content h2 {
color: #41414B;
font-family: Circular Std Bold;
font-size: 48px;
max-width: 460px;
margin-top: 8px;
margin-bottom: 0px;
}
.dp-content p {
color: #74747F;
max-width: 490px;
margin-top: 15px;
font-size: 24px;
}
.dp-content .site-btn {
margin-top: 15px;
font-size: 13px;
padding: 19px 40px;
}
.dp-img:before {
background: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
background: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
background: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
background: linear-gradient(-90deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
content: "";
position: absolute;
height: 100%;
width: 25%;
z-index: 1;
top: 0;
pointer-events: none;
background: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75));
background: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75));
background: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75));
background: linear-gradient(-90deg, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}
.dp-img img {
object-fit: cover;
object-position: right;
}
#dp-slider,
.dp-img img {
height: 738px;
}
#dp-slider .dp_item:hover:not(:first-child) {
cursor: pointer;
}
.site-btn {
color: #fff;
font-size: 18px;
font-family: "Circular Std Medium";
background: #FA8282;
padding: 14px 43px;
display: inline-block;
border-radius: 2px;
position: relative;
top: -12px;
text-decoration: none;
}
.site-btn:hover{
text-decoration: none;
color: #fff;
}
h1 { margin: 150px auto 30px auto; text-align: center; }
/* to the body element */
.noscroll { overflow: hidden; }
@media (min-device-width: 1025px) {
.noscroll {
padding-right: 15px;
}
}
.overlay {
position: fixed;
overflow-y: scroll;
top: 0; left: 0; top: 0; bottom: 0;
}
[aria-hidden="true"] {
transition: opacity 1s, z-index 0s 1s;
width: 100vw;
z-index: -1;
opacity: 0; }
[aria-hidden="false"] {
transition: opacity 1s;
width: 100%;
z-index: 1;
opacity: 1;
}
.overlay div {
margin: 15vh auto;
width: 80%;
max-width: 650px;
padding: 30px;
min-height: 200vh;
background: rgba(255,255,255, .95);
}
.overlay {
background: rgba(40,40,40, .75);
}
* { box-sizing: border-box; }
button { padding: 1.5em 4em; cursor: pointer;}
pre { background: #fafafa; padding: 15px; border: 1px #ccd dashed; }
pre + p { margin: 5vh 0; }
<div class="container" style="max-width: 1400px; margin: 0 auto;">
<div id="slider">
<div class="dp-wrap">
<div id="dp-slider">
<div class="dp_item" data-class="1" data-position="1">
<div class="dp-content">
<h2>Slide 1</h2>
<p> This is Slide 1 </p>
<button type="button" class="open-overlay">OPEN LAYER</button>
<section class="overlay" aria-hidden="true">
<div>
<h2>Hello, I'm the overlayer</h2>
...
<button type="button" class="close-overlay">CLOSE LAYER</button>
</div>
</section>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/739/any" alt="Intro">
</div>
</div>
<div class="dp_item" data-class="2" data-position="2">
<div class="dp-content">
<h2>Slide 2</h2>
<p> This is Slide 2 </p>
<button type="button" class="open-overlay">OPEN LAYER</button>
<section class="overlay" aria-hidden="true">
<div>
<h2>Hello, I'm the overlayer</h2>
...
<button type="button" class="close-overlay">CLOSE LAYER</button>
</div>
</section>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/738/any" alt="GYFN">
</div>
</div>
<div class="dp_item" data-class="3" data-position="3">
<div class="dp-content">
<h2>Slide 3</h2>
<p> This is Slide 3 </p>
<button type="button" class="open-overlay">OPEN LAYER</button>
<section class="overlay" aria-hidden="true">
<div>
<h2>Hello, I'm the overlayer</h2>
...
<button type="button" class="close-overlay">CLOSE LAYER</button>
</div>
</section>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/737/any" alt="AW">
</div>
</div>
<div class="dp_item" data-class="4" data-position="4">
<div class="dp-content">
<h2>Slide 4</h2>
<p> This is Slide 4 </p>
<button type="button" class="open-overlay">OPEN LAYER</button>
<section class="overlay" aria-hidden="true">
<div>
<h2>Hello, I'm the overlayer</h2>
...
<button type="button" class="close-overlay">CLOSE LAYER</button>
</div>
</section>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/736/any" alt="ACME">
</div>
</div>
</div>
<span id="dp-next">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #fa8c8c;
stroke-miterlimit: 10;
stroke-width: 7px;
}
</style>
</defs>
<path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)"/>
</svg>
</span>
<span id="dp-prev">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #fa8c8c;
stroke-miterlimit: 10;
stroke-width: 7px;
}
</style>
</defs>
<path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)"/>
</svg>
</span>
<ul id="dp-dots">
<li data-class="1" class="active"></li>
<li data-class="2"></li>
<li data-class="3"></li>
<li data-class="4"></li>
</ul>
</div>
</div>
</div>