anchor tag redirecting to another section

Question

I have a gallery of items, when I hover on them a "quickview" button shows up, if I click it a popup window opens. However, these items are anchors, so if the user clicks on them they take you to another section of the website. The issue that I have is that when I click on the quickview button the popup window shows up but quickly disappears and Im taken to another section of the website and thats not what I want. If I click on the quickview button I dont want to be redirected to another section, instead I want the popup to remain on the screen. I only want to be redirected If I dont click the quickview button Here's some images:

 // Open popup shop item $('.quickview__icon').click(function() { $('.overlay').css({ 'opacity': '1', 'visibility': 'visible' }); // Change popup clothing-item: img, name, price var imgid = "#" + $(this).attr('id').replace(/\\s/g, '') + "Img"; var imgsrc = $(imgid).prop('src'); var price = document.getElementById($(this).attr('id').replace(/\\s/g, '') + "Price").innerHTML; $('#clothingImg').prop('src', imgsrc); document.getElementById('clothingName').innerHTML = $(this).attr('id'); document.getElementById("clothingPrice").innerHTML = price; }); // Popup close $('#closeIcon').click(function() { $('.overlay').css({ 'opacity': '0', 'visibility': 'hidden' }); }) 

 * { margin: 0; padding: 0; } *, *::before, *::after { box-sizing: inherit; } html { box-sizing: border-box; font-size: 62.5%; -webkit-font-smoothing: subpixel-antialiased; } body { font-family: "Karla", sans-serif; font-weight: 400; line-height: 1.6; color: #222; } .container { padding: 4rem 5rem !important; } .shop-item { width: 50%; height: 32.3rem; margin: 1.5rem; position: relative; display: flex; justify-content: center; } .shop-item__img { width: 100%; height: 100%; object-fit: cover; } .quickview { width: 100%; height: 100%; position: absolute; display: flex; flex-direction: column; justify-content: space-between; align-content: center; padding-bottom: 2rem; color: #222; letter-spacing: 0.15rem; text-transform: uppercase; opacity: 0; transition: all ease-in-out 250ms; } .quickview:hover { opacity: 1; } .quickview__icon { font-size: 1rem; background-color: rgba(204, 204, 204, 0.2); padding: 0.7rem 1rem; align-self: center; } .quickview__info { font-size: 1.2rem; align-self: center; text-align: center; } .quickview__info--price { font-size: 1rem; color: rgba(61, 61, 61, 0.6); } .popup { height: 100vh; width: 100%; background-color: rgba(245, 239, 236, 0.8); display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 100; opacity: 0; visibility: hidden; transition: all ease-in-out 250ms; } .popup__img { height: 95%; } .popup__close-icon { position: absolute; top: 1rem; right: 2.5rem; font-size: 3rem; color: #d1d1d1; cursor: pointer; transition: all ease-in-out 250ms; } .popup__close-icon:hover { color: rgba(61, 61, 61, 0.6); } .popup__close-icon-clothing { position: absolute; font-size: 3.6rem; font-weight: lighter; color: #222; top: -1rem; right: 1.5rem; cursor: pointer; } .overlay { position: fixed; overflow-y: scroll; overscroll-behavior: contain; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; visibility: hidden; background-color: rgba(240, 240, 240, 0.6); } .popup-item { width: 75%; height: 150vh; background-color: #fff; margin: 5rem auto; display: flex; justify-content: center; } .product-info { padding: 5rem 3.5rem; letter-spacing: 0.1rem; color: #222; } .product-info--shop { padding: 0 3.5rem; } .product-info__price { font-size: 2.4rem; margin: 3rem 0; display: block; color: rgba(29, 29, 29, 0.7); } .product-info__text { font-size: 1.4rem; margin-bottom: 3rem; color: rgba(29, 29, 29, 0.7); } .detail-group { color: #222; margin-bottom: 4rem; } .detail-group__span { font-size: 1.1rem; text-transform: uppercase; } .detail-group__size { width: 12.5rem; font-size: 1.1rem; letter-spacing: 0.1rem; padding: 1.1rem 2rem; margin-top: 0.5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; border: 0; outline: none; background: url(../img/down-arrow.png) 85%/7% no-repeat #f8f8f8; } .detail-group__quantity { width: 7.5rem; padding: 1.1rem 1.6rem; margin-top: 0.5rem; outline: none; border: 0; background-color: #f8f8f8; } .clothing-item-flex { height: 100%; background-color: #fff; display: flex; } .clothing-item-flex__img-wrapper { min-width: 60%; margin: 1.5rem; overflow: hidden; } .clothing-item-flex__img-wrapper--no-margin { margin: 0; } .clothing-item-flex__img { width: 100%; height: 100%; object-fit: cover; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="products-container container"> <a href="haorijacket.html" class="shop-item"> <img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4f67e4b00b2c2a29ab00/1443712877696/lauren-winter-haori-jacket_0250.jpg?format=750w" alt="Clothing item" class="lazy shop-item__img" id="HaoriJacketImg"> <div class="quickview"> <span class="quickview__icon" id="Haori Jacket">Quick View</span> <span class="quickview__info">Haori jacket<br><span class="quickview__info--price" id="HaoriJacketPrice">$210.00</span></span> </div> </a> </section> <!-- Popup Shop Item --> <div class="overlay"> <div class="popup-btn popup-btn--prev"> <img src="img/arrow-btn.png" alt="Previous button" class="popup-btn__icon"> </div> <div class="popup-item"> <div class="clothing-item-flex"> <div class="clothing-item-flex__img-wrapper"> <img src="" alt="Clothing item" class="clothing-item-flex__img zoom-normal" id="clothingImg"> </div> <div class="product-info"> <h2 class="heading-secondary" id="clothingName"></h2> <span class="product-info__price" id="clothingPrice"></span> <p class="product-info__text">Sed ornare tellus non lectus blandit faucibus. Curabitur convallis nibh ut libero lobortis ullamcorper. Aliquam ornare risus in orci iaculis egestas. Vivamus varius ipsum eu leo ...</p> <div class="detail-group"> <p class="detail-group__span">Size:</p> <select class="detail-group__size"> <option value="">Select Size</option> <option value="0">0</option> <option value="2">2</option> <option value="4">4</option> <option value="6">6</option> <option value="8">8</option> </select> </div> <div class="detail-group"> <p class="detail-group__span">Quantity:</p> <input class="detail-group__quantity" max="9999" min="1" value="1" type="number"> </div> <button type="button" class="btn btn--form btn--form--shop">Add to cart</button> <a href="" class="btn-view">View Full Item</a> </div> </div> <span class="popup__close-icon-clothing" id="closeIcon">&times;</span> </div> <div class="popup-btn"> <img src="img/arrow-btn.png" alt="Next button" class="popup-btn__icon"> </div> </div> 

Answer 1

The solution that Vinod mentioned above is the quickest way I can think of solving this issue too. And that is moving the Quickview button outside of the anchor tag. (In addition I would also rather use a button than a span for screen reader friendliness)

<section class="products-container container"></section>
  <button class="quickview__icon" id="Haori Jacket">Quick View</button>
  <a href="haorijacket.html" class="shop-item">
    <img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4f67e4b00b2c2a29ab00/1443712877696/lauren-winter-haori-jacket_0250.jpg?format=750w" alt="Clothing item" class="lazy shop-item__img" id="HaoriJacketImg">
    <div class="quickview">
      <span class="quickview__info">Haori jacket<br><span class="quickview__info--price" id="HaoriJacketPrice">$210.00</span></span>
    </div>
  </a>
</section>

Answer 2

anchor, you can add javascript:void(0); so popup still you can show.

 // Open popup shop item $('.quickview__icon').click(function() { $('.overlay').css({'opacity': '1', 'visibility': 'visible'}); // Change popup clothing-item: img, name, price var imgid = "#"+$(this).attr('id').replace(/\\s/g,'') + "Img"; var imgsrc = $(imgid).prop('src'); var price = document.getElementById($(this).attr('id').replace(/\\s/g,'') + "Price").innerHTML; $('#clothingImg').prop('src', imgsrc); document.getElementById('clothingName').innerHTML = $(this).attr('id'); document.getElementById("clothingPrice").innerHTML = price; }); // Popup close $('#closeIcon').click(function() { $('.overlay').css({ 'opacity': '0', 'visibility': 'hidden'}); }) 

 * { margin: 0; padding: 0; } *, *::before, *::after { box-sizing: inherit; } html { box-sizing: border-box; font-size: 62.5%; -webkit-font-smoothing: subpixel-antialiased; } body { font-family: "Karla", sans-serif; font-weight: 400; line-height: 1.6; color: #222; } .container { padding: 4rem 5rem !important; } .shop-item { width: 50%; height: 32.3rem; margin: 1.5rem; position: relative; display: flex; justify-content: center; } .shop-item__img { width: 100%; height: 100%; object-fit: cover; } .quickview { width: 100%; height: 100%; position: absolute; display: flex; flex-direction: column; justify-content: space-between; align-content: center; padding-bottom: 2rem; color: #222; letter-spacing: 0.15rem; text-transform: uppercase; opacity: 0; transition: all ease-in-out 250ms; } .quickview:hover { opacity: 1; } .quickview__icon { font-size: 1rem; background-color: rgba(204, 204, 204, 0.2); padding: 0.7rem 1rem; align-self: center; } .quickview__info { font-size: 1.2rem; align-self: center; text-align: center; } .quickview__info--price { font-size: 1rem; color: rgba(61, 61, 61, 0.6); } .popup { height: 100vh; width: 100%; background-color: rgba(245, 239, 236, 0.8); display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 100; opacity: 0; visibility: hidden; transition: all ease-in-out 250ms; } .popup__img { height: 95%; } .popup__close-icon { position: absolute; top: 1rem; right: 2.5rem; font-size: 3rem; color: #d1d1d1; cursor: pointer; transition: all ease-in-out 250ms; } .popup__close-icon:hover { color: rgba(61, 61, 61, 0.6); } .popup__close-icon-clothing { position: absolute; font-size: 3.6rem; font-weight: lighter; color: #222; top: -1rem; right: 1.5rem; cursor: pointer; } .overlay { position: fixed; overflow-y: scroll; overscroll-behavior: contain; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; visibility: hidden; background-color: rgba(240, 240, 240, 0.6); } .popup-item { width: 75%; height: 150vh; background-color: #fff; margin: 5rem auto; display: flex; justify-content: center; } .product-info { padding: 5rem 3.5rem; letter-spacing: 0.1rem; color: #222; } .product-info--shop { padding: 0 3.5rem; } .product-info__price { font-size: 2.4rem; margin: 3rem 0; display: block; color: rgba(29, 29, 29, 0.7); } .product-info__text { font-size: 1.4rem; margin-bottom: 3rem; color: rgba(29, 29, 29, 0.7); } .detail-group { color: #222; margin-bottom: 4rem; } .detail-group__span { font-size: 1.1rem; text-transform: uppercase; } .detail-group__size { width: 12.5rem; font-size: 1.1rem; letter-spacing: 0.1rem; padding: 1.1rem 2rem; margin-top: 0.5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; border: 0; outline: none; background: url(../img/down-arrow.png) 85%/7% no-repeat #f8f8f8; } .detail-group__quantity { width: 7.5rem; padding: 1.1rem 1.6rem; margin-top: 0.5rem; outline: none; border: 0; background-color: #f8f8f8; } .clothing-item-flex { height: 100%; background-color: #fff; display: flex; } .clothing-item-flex__img-wrapper { min-width: 60%; margin: 1.5rem; overflow: hidden; } .clothing-item-flex__img-wrapper--no-margin { margin: 0; } .clothing-item-flex__img { width: 100%; height: 100%; object-fit: cover; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="products-container container"> <a href="haorijacket.html" class="shop-item"> <img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4f67e4b00b2c2a29ab00/1443712877696/lauren-winter-haori-jacket_0250.jpg?format=750w" alt="Clothing item" class="lazy shop-item__img" id="HaoriJacketImg"> <div class="quickview"> <span class="quickview__icon" id="Haori Jacket">Quick View</span> <span class="quickview__info">Haori jacket<br><span class="quickview__info--price" id="HaoriJacketPrice">$210.00</span></span> </div> </a> </section> <!-- Popup Shop Item --> <div class="overlay"> <div class="popup-btn popup-btn--prev"> <img src="img/arrow-btn.png" alt="Previous button" class="popup-btn__icon"> </div> <div class="popup-item"> <div class="clothing-item-flex"> <div class="clothing-item-flex__img-wrapper"> <img src="" alt="Clothing item" class="clothing-item-flex__img zoom-normal" id="clothingImg"> </div> <div class="product-info"> <h2 class="heading-secondary" id="clothingName"></h2> <span class="product-info__price" id="clothingPrice"></span> <p class="product-info__text">Sed ornare tellus non lectus blandit faucibus. Curabitur convallis nibh ut libero lobortis ullamcorper. Aliquam ornare risus in orci iaculis egestas. Vivamus varius ipsum eu leo ...</p> <div class="detail-group"> <p class="detail-group__span">Size:</p> <select class="detail-group__size"> <option value="">Select Size</option> <option value="0">0</option> <option value="2">2</option> <option value="4">4</option> <option value="6">6</option> <option value="8">8</option> </select> </div> <div class="detail-group"> <p class="detail-group__span">Quantity:</p> <input class="detail-group__quantity" max="9999" min="1" value="1" type="number"> </div> <button type="button" class="btn btn--form btn--form--shop">Add to cart</button> <a href="" class="btn-view">View Full Item</a> </div> </div> <span class="popup__close-icon-clothing" id="closeIcon">&times;</span> </div> <div class="popup-btn"> <img src="img/arrow-btn.png" alt="Next button" class="popup-btn__icon"> </div> </div> 

Answer 3

Please change the span to keep it above the tag and align with proper css

<section class="products-container container">
 <span class="quickview__icon" id="Haori Jacket">Quick View</span>
  <a href="haorijacket.html" class="shop-item">
          <img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4f67e4b00b2c2a29ab00/1443712877696/lauren-winter-haori-jacket_0250.jpg?format=750w" alt="Clothing item" class="lazy shop-item__img" id="HaoriJacketImg">
          <div class="quickview">

            <span class="quickview__info">Haori jacket<br><span class="quickview__info--price" id="HaoriJacketPrice">$210.00</span></span>
          </div>
        </a>
</section>