Open new window on the same Site

1

sorry for my English…

image

hi, I to want when someone clicks the zoom icon it opens a small window in the Site, I`ll this small window describe a product.

HTML code how to build this image,

<div class="container-fluid">
    <div class="row">
       
         <div class="col"> 
             
          <div class="product-grid">
                
                <div class="product-image">
                   <a class="link" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
                    <img alt=""  class="bild" src="photo/111.jpg">     
                   </a> 
                   
                </div>
                   
                <div class="product-content">
                     <a class="links" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
                    <p class="title">Mochila doble tirantes Violeta</p>
                    </a>     
                      
                </div>
                    <div class="price">$16.00</div>
                      
                     <div class="div-zoom">
                                       
                   <span class="zum-warenkorb">zum warenkorb hinzufügen</span>
                   <i class="fa fa-search-plus" style="font-size: 94%; color: white; background-color:  #595959; padding: 3%;"></i>
                 </div> 
            </div>
        </div>
</div>

Css code where add to basket (zum warenkorb hinzufügen of german language…) and click to zoom icon

/*  div-zoom-fenster   */

.div-zoom { padding: 2%; padding-top: 15%; text-align: left;}

/*  zum-warenkorb    */
.zum-warenkorb { font-size: 89%; background-color: #bfbfbf; color: #ffffff; padding: 2%; margin-top: 2%; text-align: left;}

.div-zoom i {padding-bottom: 5%; margin-left: 4%; }

Can please someone help me, Thanks!

2

Gday,

does your site use js?

3

sorry for my later answer… , I’m with Bootstrap 4 and it uses js…

yesterday asked on another forum and gave the solution…

Because I use Bootstrap 4 the solution is from it :grinning:

With this code to come the window

<div class="modal fade" id="zoomWindow" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
               <div class="modal-dialog" role="document">
                   <div class="modal-content">
      
                       <button type="button" class="close text-right" data-dismiss="modal" aria-label="Close">
                         <span aria-hidden="true">&times;</span>
                        </button>
                            <div class="modal-body">
                                 put here, whaterver you want
                            </div>
      
                  </div>
                </div>
             </div>