堆栈内存溢出
  繁体   English   中英

叠加不会在点击时触发

[英]Overlay Won't Fire On Click

 原文  2020-03-11 14:18:34  6   2    javascript/ html/ css/ slider/ overlay

问题描述

这是我没有编写的现有代码的组合。 我不确定为什么覆盖层不会触发。 关键是要有滑块，在单击“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>

2 个解决方案

解决方案1
 0  2020-03-11 14:46:08

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/

解决方案2
 0  2020-03-11 15:42:04

安德烈斯·阿巴迪亚非常感谢你！ 我在“Header Slide #”之前粘贴了一个部分块，但在打开“data-position”和“dp-content”div之后。 想法是将覆盖层包含在“dp-content”div 中，以便将其视为该指令块的一部分。 这允许叠加层位于渐变的顶部并按预期打开。 代码需要一些改进，但基本问题已解决。 你得到了我的赞成票，但我的名声太低了，数不过来。 无论如何，谢谢！ 你的决心就像一个魅力。 代码归功于：

  1. [使用 jQuery 和 CSS3 的 3D 堆栈卡滑块]
  2. [Stack Overflow 社区的 Fabrizio Calderan]

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 按钮点击不会触发 div按钮上的JQuery click（）不会触发 Firefox不会触发点击事件 单击按钮时不会触发JavaScript函数 在开发控制台中触发时不会触发 JQuery“点击”事件 聚合物纸图标按钮不会触发 Firefox a.click没有断点将无法启动 jQuery单击/触摸事件不会在移动设备中触发（内联元素） 下拉菜单不会在点击时展开，因为 onChange 不会触发 jQuery不会开火
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM