javascript - 覆盖不会在点击时触发
问题描述
这是我没有编写的现有代码的组合。我不确定为什么覆盖不会触发。关键是要有滑块,在单击“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>
解决方案
您的JS 中的 仅选择第一个滑块容器内的第overlay = document.querySelector('.overlay')
一个覆盖对象(querySelector Docs )。这就是为什么您在第二张或第三张幻灯片上看不到它的原因。
在其他容器之外有模态是很常见的。毕竟是模态的。尝试像这样移出您的代码。
<!-- 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>
这应该有效。尝试使用代码:https ://jsfiddle.net/andresabadia/n45gq7eL/1/
如果您希望每个滑块都有一个模态,则上述解决方案仅适用于一个模态,您还应该将模态放在容器之外并像这样更新 JS:
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);
});
您可以在此处使用此版本的代码:https ://jsfiddle.net/andresabadia/n45gq7eL/3/
推荐阅读
- kubernetes - Kubernetes NGINX Ingŕess 控制器 TCP / MQTT 配置
- php - 关于在 PHP 中计算平均值的问题
- python - 多波段混合使接缝更亮、更明显
- ansible - 如何使用 ansible 在私有子网(Windows)中安装应用程序?
- php - 如何在php中进行注册验证
- rust - 为什么我不能重新绑定引用变量,但我可以重新绑定结构中的引用字段?
- reactjs - 如何使用 React 将多个 html 表导出到 Excel?
- sql - 是否有任何选项可以在参数的 where 子句中替换 NVL
- ruby - 如何在 Ruby on Rails 中通过 Google Contact API 获取常用联系人
- reactjs - 根据用户在 REACT 中选择下拉值动态呈现选择表单项?