Disable clickable element only within the div area

问题: I have a thumbnail image that has an overlay element on it (slides up). when you click the background image It should open a lightbox (which is does). when you click the ov...

问题:

I have a thumbnail image that has an overlay element on it (slides up). when you click the background image It should open a lightbox (which is does). when you click the overlay div, it will open a seperate modal. The issue is: when I click the overlay div, both the lightbox and modal open. I think this is difficult to explain but I'd like to know how to disable clicking through the orange div box

Using an a blank href will not work in this instance. When I do this, the lightbox duplicates images.

        .overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(47, 74, 102, .6);
          overflow: hidden;
          width: 100%;
          height: 0;
          transition: .5s ease;
          cursor: pointer;
          display: block;
        }

        .overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          overflow: hidden;
          width: 100%;
          height: 0;
          transition: .5s ease;
          cursor: pointer;
          display: block;
        }

        .imagetext:hover .overlay {
          height: 100%;
        }

        .mySlides {display:none;}

        .overlaytitle {
          margin-top: 1rem;
            color: white;
          opacity: 1.0;
            font-size: 1rem;
            position: absolute;
          font-family: oswald;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align: center;
            width: 100%;
            padding-top: 1rem;
        }


        .overlaysubtitle {
            color: white;
          font-family: lato;
          font-size: 12px;
          font-style: italic;
        }

        .fullproj{
          background-color: #f17e5a;
            bottom: 0;
          align-content: center;
            height: 30%;
            line-height: 30%;
          padding-top: 7%;
          width: 100%;
          text-align: center;
          font-family: oswald;
          color: white;
          text-decoration: none;
          font-size: 14px;
            position: absolute;
            z-index: 1;
        }


        .modalbutton{
            width: 100%;
            height: 30%;
            background-color: #f17e5a;
            text-decoration: none;
            color: white;
            font-size: 1rem;
            bottom: 0;
            position: absolute;
            border:none;
            font-family: oswald;
            font-weight: thin;
            cursor: pointer;

        }


        .modalbutton:hover{
            background-color:#bb5c5a;
        }
        <div class="responsive brands">
          <div class="gallery">
             <div class="imagetext"> 
              <a href="mpimg/viva/box.png" alt="Viva Lifestyle Box and Bar" rel="lightbox1" data-lightbox="example-set"  title="Viva Lifestyle Box and Bar">
                <div class="overlay">
                  <div class="overlaytitle">Viva Lifestyle<br>
                    <div class="overlaysubtitle">Branding</div><br>
                  </div> 
                            <button class="modalbutton"><a href="#">VIEW FULL PROJECT</a></button>
                        </div>   
                <img src="Img/portfolio/Branding/viva.png" alt="EXAMPLE IMG" width="600" height="400" class="image">	
              </a>
                </div>
            </div>
          </div>


回答1:

You can do it by css

.modalbutton {
  pointer-events: none;
}
  • 发表于 2019-01-17 15:14
  • 阅读 ( 275 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除