Overlay Won't Fire On Click
Question
This is a combination of existing code I did not write. I'm not sure why the overlay won't fire. The point is to have the slider, fire a modal when "site-btn" is clicked, and open the modal with lengthy text content. The code starts out working on slide one. Slide two through four won't fire at all. The gradient sits on top of the overlay unless I delete the code altogether. z-index does not help. After several tries, fiddling with the css and javascript for days, I haven't made much progress at all. I need to figure this out. I'm not a huge coder, but I know my way around. Can anyone tell me what I am doing wrong? Here's the code:
<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>
2 answers
solution1
0 2020-03-11 14:46:08
The overlay = document.querySelector('.overlay') in your JS only selects the first overlay object ( querySelector Docs ) which is inside the first slider container. That's why you don't see it, when your on the second or third slide.
It's common to have the modal outside of other containers. It's a modal after all. Try moving out your code like this.
<!-- MODAL -->
<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>
<!-- MODAL -->
<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>
</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>
</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>
</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>
</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>
This should work. Try to play with the code: https://jsfiddle.net/andresabadia/n45gq7eL/1/
The solution above will work with only one modal if you want a modal for every slider you should also put the modals outside the containers and update the JS like so:
HTML:
<!--Modal-1-->
<section class="overlay overlay-1" aria-hidden="true">
<div>
<h2>Hello, I'm the overlayer 1</h2>
...
<button type="button" class="close-overlay" data-modal="1">CLOSE LAYER</button>
</div>
</section>
<!--Modal-1-->
<!--Modal-2-->
<section class="overlay overlay-2" aria-hidden="true">
<div>
<h2>Hello, I'm the overlayer 2</h2>
...
<button type="button" class="close-overlay" data-modal="2">CLOSE LAYER</button>
</div>
</section>
<!--Modal-2-->
<!--Modal-3-->
<section class="overlay overlay-3" aria-hidden="true">
<div>
<h2>Hello, I'm the overlayer 3</h2>
...
<button type="button" class="close-overlay" data-modal="3">CLOSE LAYER</button>
</div>
</section>
<!--Modal-3-->
<!--Modal-4-->
<section class="overlay overlay-4" aria-hidden="true">
<div>
<h2>Hello, I'm the overlayer 4</h2>
...
<button type="button" class="close-overlay" data-modal="4">CLOSE LAYER</button>
</div>
</section>
<!--Modal-4-->
<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" data-modal="1">OPEN LAYER</button>
</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" data-modal="2">OPEN LAYER</button>
</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" data-modal="3">OPEN LAYER</button>
</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" data-modal="4">OPEN LAYER</button>
</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>
JS:
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();
});
});
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 */
if (this.dataset.modal) {
overlay = document.querySelector('.overlay.overlay-' + this.dataset.modal);
}
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);
});
You can play around with this version of the code here: https://jsfiddle.net/andresabadia/n45gq7eL/3/
solution2
0 2020-03-11 15:42:04
Andres Abadia thank you so much! I pasted a section block before "Header Slide #" but after the opening "data-position" and "dp-content" divs. The thinking was to include the overlay in the "dp-content" div so it's seen as part of that block of instructions. This allows the overlay to sit on top of the gradient and open as expected. The code needs some refining but the essential issue is resolved. You got the upvote from me, but my reputation is too low for it to count. In any case, thank you ! Your resolution worked like a charm. Credit for the code goes to:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
button click won't fire
JQuery click() on a div button won't fire
Firefox won't fire click event
JavaScript function won't fire on button click
JQuery "click" event won't fire when triggered in dev console
Polymer paper-icon-button won't fire click
Firefox a.click won't fire without a breakpoint
jQuery click/touch events won't fire in mobile (inline element)
Drop down not expanding on click because onChange won't fire
jQuery won't fire
Related Tags