JQuery - Abrir una nueva ventana con jQuery

Pos: 15

Val: 21

Abrir una nueva ventana con jQuery

Publicado por Joseba (10 intervenciones) el 18/04/2020 15:06:42

Aupa, decir que nunca he usado jQuery...

Aquí https://stackoverflow.com/questions/61286597/open-a-window-on-the-same-site-with-jquery he preguntado en Ingles como abrir una ventana en la pagina donde estoy, sin resulatado... la mayoria de las respuestas me decian que usase Modal de Bootstrap 4, que es lo que uso en mi pagina, el problema és que Modal tiene sus limites y no puedes hacer lo que quieras...por eso quiero intentarlo con jQuery....mi problema es que nunca he usado Java Script...

Mi idea es que cuando alguien pulse el icono de ampliar,

ZxOosUe

Me salga una cosa parecida ha esta,

ZeVhQI5

El code come de la primera fotografia,

<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>

                 <a href="#">

                   <i class="fa fa-search-plus" style="font-size: 94%; color: white; background-color:  #595959; padding: 3%;"> </i>

                   </a>

                 </div>

            </div>

         </div>

 </div>

</div>

Aquí todo el code de la pagina como lo tengo https://codepen.io/mezb/pen/YzyqLqy

Me podria ayudar algien porfavor con este problema, esto intentando solucionar este problema desde hace tres dias preguntado en diferentes Forums pero por ahora en ninguno me han dado una solución...

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 3

Val: 229

Abrir una nueva ventana con jQuery

Publicado por joel (71 intervenciones) el 18/04/2020 19:07:37

Hola Joseba, según he visto en la segunda imagen, creo que no es una ventana, sino una capa dentro de la pagina... puede ser?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 15

Val: 21

Abrir una nueva ventana con jQuery

Publicado por Joseba (10 intervenciones) el 18/04/2020 19:41:18

Aupa muchas gracias por tu respuesta ! la pagina web donde he cogido la copia... https://shop.craftmano.de/ mi idea hes hacer una cosa parecida, mi problema es que no tengo idea...

Valora esta respuesta

Comentar

Pos: 15

Val: 21

Abrir una nueva ventana con jQuery

Publicado por Joseba (10 intervenciones) el 18/04/2020 20:15:00

He inspecionado con Firefox el code donde esta Hüfttasche aus Hanf Yellow y he encontrado esto,

<div class="product-inner-wrap">

    <a class="prodimage f-row" href="/de_DE/p/Hufttasche-aus-Hanf-Yellow/853" title="Hüfttasche aus Hanf Yellow" rel="dofollow">

        <span class="f-grid-12 img-wrap replace-img-list lazy-load">

<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D"

data-src="/environment/cache/images/300_300_productGfx_3113/nerka-zolta-1.jpg" alt="Hüfttasche aus Hanf Yellow"

data-src-alt="/environment/cache/images/300_300_productGfx_3114/nerka-zolta-2.jpg"

            <noscript>

                <img src="/environment/cache/images/300_300_productGfx_3113/nerka-zolta-1.jpg" alt="Hüfttasche aus Hanf Yellow" />

            </noscript>

        </span>

    </a>

    <a class="prodname f-row" href="/de_DE/p/Hufttasche-aus-Hanf-Yellow/853" title="Hüfttasche aus Hanf Yellow">

        <span class="productname">Hüfttasche aus Hanf Yellow</span>

    </a>

    <div class="f-row manufacturer">

        <em>Anbieter:</em>

           <a class="brand" target="_blank" rel="noopener" href="http://craftmano.com" title="Craftmano">

            Craftmano

            </a>

    </div>

    <div class="price f-row">

        <span>Preis:<span>

        <em>12,90 €</em>

    </div>

hice un screenshot de que creo es el code jQuery QzmJTf9

Valora esta respuesta

Comentar

Pos: 3

Val: 229

Abrir una nueva ventana con jQuery

Publicado por joel (71 intervenciones) el 18/04/2020 21:02:21

Revisa este código... hace lo que necesitas...
https://www.lawebdelprogramador.com/codigo/JQuery/2062-Mostrar-una-ventana-en-el-centro-y-mostrar-el-resto-transparente.html

Valora esta respuesta

Comentar

Pos: 15

Val: 21

Abrir una nueva ventana con jQuery

Publicado por Joseba (10 intervenciones) el 18/04/2020 21:23:23

Milar Esker! en euskera muchassssssss graciasssssss! , no lo he hecho nunca pero no es mi primera webseite ... https://linuxusers.net/ esta pagina la tengo hasta el 23 de este mes. como no tengo dinero para el server..... so, mañana lo intetnto espero que pueda hacerlo sin pedir ayuda.... te deseo unas buenas noches.....

te queria puntuar pero como tengo problema con el e-mail no puedo...mañana lo intento de nuevo...

Valora esta respuesta

Comentar

Pos: 15

Val: 21

Abrir una nueva ventana con jQuery

Publicado por Joseba (10 intervenciones) el 19/04/2020 13:18:36

Aupa, tú code funciona muy bien, cuando clico, la ventana se habre bien pero el Browser se mueve hacia arriba, no se queda quieto..como tengo el code,

<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>

                             <div onclick='layer_show();'><a href="#">

                        <i class="fa fa-search-plus" style="font-size: 94%; color: white; background-color:  #595959; padding: 3%;"></i></a></div>

                      </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 style='width:100%;text-align:right;border-bottom:1px solid;'><span onclick="layer_close();" style='cursor:pointer;padding-right:5px;'>cerrar</span></div>

	                   Texto para la capa

                        </div>

                  </div>

</div>

Valora esta respuesta

Comentar

Pos: 15

Val: 21

Abrir una nueva ventana con jQuery

Publicado por Joseba (10 intervenciones) el 21/04/2020 14:28:07

Una otra pregunta... como cambiar el code de jQuery que me distes la altura que recibo..

yo ahora recibo la ventana así,

8ubvJrl

pero quiero recibir esta ventana mas arriba, como lo hago ?

como tengo el css para estos id

/* Determina el fondo transparente cuando se muestra la previsualizacion */

#layerPreview	{position:absolute;z-index:1;display:none;top: -10px;left:0px;width:100%;height:100%;background-color:#fff;

				 background-color: rgba(50, 50, 50, 0.5);

/* Determina la capa que aparecera centrada */

#layerPreviewContent{position:absolute;z-index:1;display:none;background-color:#fff; margin-top: 0px;left:50%;

    width:600px;

    margin-left:-250px;

    height:430px;

    -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);

    -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);

    box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);

#layerPreviewContent #bild-text img {

display: block; float: left; width: 45%; margin-top: 0px;

 margin-left: auto;

  margin-right: auto;

  margin-top: 1%;

#text-pruduct {   text-align: right; margin-top: 10%; margin-right: 5%;}

como he contruido la ventana,

<!-- 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>

     </div>

   </div>

Valora esta respuesta

Comentar

Pos: 15

Val: 21

Abrir una nueva ventana con jQuery

Publicado por Joseba (10 intervenciones) el 21/04/2020 16:13:14

el Css de los codes que habren la nueva ventana...

/*      ***** Anfang    Fenster producut **** */

/* Determina el fondo transparente cuando se muestra la previsualizacion */

#layerPreview		{position:absolute;z-index:1;display:none;top: 0px;left:0px;width:100%;height:100%;background-color:#fff;

					 background-color: rgba(50, 50, 50, 0.5);

/* Determina la capa que aparecera centrada */

#layerPreviewContent{position:absolute;z-index:1;display:none;background-color:#fff; margin-top: 0px;left:50%;

					width:600px;

					margin-left:-250px;

					height:400px;

                    -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);

					-webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);

                    box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);

#tittel-text {padding: 3%; width:100%;text-align:left;border-bottom:1px hidden; background-color:  #d7a8a8;}

#closse-text {  color: #f2f2f2; padding: 5px;  cursor: pointer; float: right;}

/*  ------------------  */

#layerPreviewContent #bild-text img {

display: block; float: left; width: 40%; margin-top: 0px;

 margin-left: auto;

  margin-right: auto;

#text-pruduct {   text-align: right; margin-top: 10%; margin-right: 5%;}

/*  *****    ende    Fenster producut ******  */

Valora esta respuesta

Comentar

Pos: 3

Val: 229

Abrir una nueva ventana con jQuery

Publicado por joel (71 intervenciones) el 21/04/2020 16:29:45

Tal y como hemos comentado en el chat, el problema esta en la linea:

var posTop=(($(window).height()/2)-(200/2))+$(document).scrollTop();

ya que tu has definido la anchura de la capa como de 400, tendrias que poner algo así:

var posTop=(($(window).height()/2)-(400/2))+$(document).scrollTop();

Valora esta respuesta

Comentar

Pos: 15

Val: 21

Abrir una nueva ventana con jQuery

Publicado por Joseba (10 intervenciones) el 24/04/2020 12:18:30

Perdona que te pregunte una nueva pregunta..., he añadido una nueva fotografia a le coleccion de productos v7fftvX

y cuando le doy a la ventana para que se abra, se me habre con la primera fotografia, aunque el link le haya puesto a la segunda...

Como tengo el html code,

<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="tachen_&_rucksacke/photo/113.png">

       </a>

    </div>

    <div class="product-content">

         <a class="links" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">

        <p class="title">Rucksack aus Hanf Gelbe</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 Gelbe <span id="closse-text"  onclick="layer_close();">Schließen</span></div>

      <div  id="bild-text"><img  alt=""  src="tachen_&_rucksacke/photo/113.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>

el jQuery code que me distes,

<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>

y como lo tengo en Css,

/* Determina el fondo transparente cuando se muestra la previsualizacion */

#layerPreview		{position:absolute;z-index:1;display:none;top: 0px;left:0px;width:100%;height:100%;background-color:#fff;

     background-color: rgba(50, 50, 50, 0.5);

/* Determina la capa que aparecera centrada */

#layerPreviewContent{position:absolute;z-index:1;display:none;background-color:#fff; margin-top: 0px;left:50%;

    width:30%;

    margin-left:-250px;

    height:40%;

    -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);

    -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);

    box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);

#tittel-text {padding: 3%; width:100%;text-align:left;border-bottom:1px hidden; background-color:  #d7a8a8;}

#closse-text {  color: #f2f2f2; padding: 5px;  cursor: pointer; float: right;}

/*  ------------------  */

#layerPreviewContent #bild-text img {

display: block; float: left; width: 42%; margin-top: 0px;

#text-pruduct {   text-align: right; margin-top: 10%; margin-right: 5%;}

La pregunta seria como puedo hacer que cuando habra la ventana me salga la segunda fotografia que he puesto...

Valora esta respuesta

Comentar

Posicionamiento al reducir la pagina

Animación