Open a window on the same Site with jQuery

Sorry for my English…

how to show the image

What I want is, when someone clicks the zoom icon, it opens a small window in the Site and in this small window I describe a product.

The code from the 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>

Here is the code from the Site.

I use Bootstrap 4 with a Grid Layout.

What I want is, when someone clicks the zoom icon, it opens a small window in the Site and in this small window I describe a product.

How I to want

Can please someone help me and explain with easy words how to solve this problem with jQuery, Thanks

This UI is called a “modal”, maybe if you try googling that you’ll get better results.

Bootstrap has something built-in:

Thank for your answer but I tried with Modal without to take place… two days ago asked here and is not an easy solution for my problem…there are to try with jQuery

Found the solution with jQuery… reality was on other Forum people gave it…

How to show now the code on Html,

<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/112.png">     
                   </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%; cursor: zoom-in;" onclick='layer_show();'></i></div> 
                         
                     </div>
               </div> 
               <!-- En el momento que se pulse sobre la capa transparente se cerrara -->
                       <div id="layerPreview" > </div>
                       <div id='layerPreviewContent'>
	                       <!-- Mostramos el texto de cerrar para poder cerrar la ventana -->
	                      <div id="tittel-text">Rucksack aus Hanf Viola <span id="closse-text"  onclick="layer_close();">Schließen</span></div>
	                      <div  id="bild-text"><img  alt=""  src="photo/112.png"></div>
                            <div id="text-pruduct">
                            <p>Verfügbarkeit: <b>eine Menge</b></p>
                            <p>Zustellung innerhalb von: <b>1-2 Tage</b></p>
                            <p>Hanf: <b>50%</b></p>
                            <p>Baumwolle: <b>50%</b></p> 
                          </div>
                       </div>

The jQuery Code,

<script>
	/**
	 * Funcion que muestra las capas
	 */
	function layer_show()
	{
		/* Ponemos los atributos de posicion a la capa transparente del fondo */
		$('#layerPreview').attr("style", "top:0px; height:"+$(document).height()+"px; width:"+$(window).width()+"px; display:inline;");
		
		/* Buscamos la posicion superior de la capa que aparece centrada.
		   La anchura y la posicion centrada se establece en el estilo */
		var posTop=(($(window).height()/2)-(500/2))+$(document).scrollTop();
		if(posTop<0)
			posTop=0;
		$('#layerPreviewContent').attr("style", "top:"+posTop+"px;");
		/* Indicamos que se muestre la capa */
		$('#layerPreviewContent').show(600);
	}
	
	/**
	 * Funcion que esconde las capas
	 */
	function layer_close()
	{
		$('#layerPreviewContent').hide(300);
		$('#layerPreview').hide();
}

</script>

Here how to come the Window… :grinning: