Foros del Web » Programando para Internet » Jquery »

Como usar una sola ventana modal para varios prodcutos

 Estas en el tema de Como usar una sola ventana modal para varios prodcutos en el foro de Jquery en Foros del Web. Hola buenos dia a todos ustedes, estoy algo perdido en unos aspectos y queria hacerles una consulta ya que estoy trabajando una tienda online para ...
  #1 (permalink)  
Antiguo 20/10/2015, 11:20
 
Fecha de Ingreso: octubre-2015
Ubicación: Mexico, df
Mensajes: 3
Antigüedad: 9 años, 2 meses
Puntos: 0
Pregunta Como usar una sola ventana modal para varios prodcutos
Hola buenos dia a todos ustedes, estoy algo perdido en unos aspectos y queria hacerles una consulta ya que estoy trabajando una tienda online para un proyecto escolar (por lo tanto solamente sera front-end por el momento, ya despues si me animo a meterme al php y demas) la cuestion es que en la parte de productos quiero que estos se muestren en una ventana modal, lo cual esta echo, el problema viene dentro de esta ventana modal del producto, quiesiera saber si hay alguna forma en la que al hacer click en un producto cualquiera, se habra la ventana y muetre sus detalles de dicho producto y al cerrarla y abrir otro producto se utilice la misma plantilla modal para no hacer una por cada producto.
¿Cómo puedo llamar tanto a una imagen y texto de diferentes productos a una mismva ventana modal?

Saludos a todos y espero puedan orientarme. :D

Por cierto, la ventana modal esta echa solamente con css.

[URL="https://drive.google.com/open?id=0BxcKp7XL2LsAbmMtRGtwd2VyWHc"]les dejo los archivos en un zip[/URL]
  #2 (permalink)  
Antiguo 22/10/2015, 15:44
 
Fecha de Ingreso: octubre-2010
Mensajes: 219
Antigüedad: 14 años, 2 meses
Puntos: 2
Respuesta: Como usar una sola ventana modal para varios prodcutos
Tendira que ver como estas haciendo el modal, pero supongo que debes tener algo como esto en tu html:

Código HTML: 
Ver original
  1. <div id="modal">
  2.   <div id="titulo"></div>
  3.   <div id="cuerpo"></div>
  4. </div>

Antes de abrir un modal, podrías hacer lo siguiente en Java Script:

Código Javascript: 
Ver original
  1. $('#titulo').html('Nuevo título');
  2. $('#cuerpo').html('Nuevo cuerpo');
  #3 (permalink)  
Antiguo 22/10/2015, 21:55
 
Fecha de Ingreso: octubre-2015
Ubicación: Mexico, df
Mensajes: 3
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Como usar una sola ventana modal para varios prodcutos
Hola que tal gracias por responder, en el html prácticamente es la base que mostraste mas el codigo csss, lo que no entiendo muy bien es de que forma hare llamar a cada elemento, esta seria la plantilla para unos digamos 30 productos, ¿tendria que poner para cada id de la plantilla que quiero que cambie, una linea de codigo en JS?
por ejemplo, ¿en "nombre de producto" tendria que ponerle un id y a parte la linea de codigo en .JS con el id de este y el "nuevo producto" y asi con cada elemento que quiero que cambie?

<h1 id="nombre-producto">NOMBRE DE PRODUCTO</h1>

( $('#nombre-producto').html('Nuevo título'); )

Código HTML: 
Ver original
  1. <div id="promociones-modal"></div><!-- PROMOCIONES -->
  2.         <div id="producto-modal" class="modalmask">
  3.             <div class="modalbox-producto movedown">
  4.                 <a href="#close" title="Close" class="close">X</a>
  5.                 <h1>NOMBRE DE PRODUCTO</h1>
  6.                 <div>
  7.                     <div id="contenedor-galeria">
  8.                         <ul id="gallery">
  9.                         <li><img src="imagenes/Blue Tiger 1.jpg" alt="" /></li>
  10.                         <li><img src="imagenes/caracol manzana.jpg" alt="" /></li>
  11.                         <li><img src="imagenes/CRYPTOCORYNE WENDY.jpg" alt="" /></li>
  12.                         <li><img src="imagenes/echinodorus ozelot 4.jpg" alt="" /></li>
  13.                         </ul>
  14.                     </div>
  15.                     <div id="datos">
  16.                         <div>
  17.                             <p>Nombre Cientifico: Cryptocoryne wendtii “brown"</p>
  18.                             <p>Familia: Araceae.</p>
  19.                             <p>Distribución: Originaria del sudeste de Asia, Sri Lanka.</p>
  20.                             <p>Tamaño:de 10 a 15 cm de altura</p>
  21.                             <h2>$130</h2>
  22.                         </div>
  23.                         <div>
  24.                             <p>CANTIDAD</p>
  25.                             <input class="cantidad" type="number" placeholder="Ingresar cantidad">
  26.                             <button class="boton" type="button" >Agregar a mi carro</button>
  27.                         </div>
  28.                     </div>
  29.                 </div>
  30.                 <div>
  31.                     <ul id="gallery">
  32.                         <li><img src="imagenes/Blue Tiger 1.jpg" alt="" /></li>
  33.                         <li><img src="imagenes/caracol manzana.jpg" alt="" /></li>
  34.                         <li><img src="imagenes/CRYPTOCORYNE WENDY.jpg" alt="" /></li>
  35.                         <li><img src="imagenes/echinodorus ozelot 4.jpg" alt="" /></li>
  36.                     </ul>
  37.                 </div>
  38.                 <div class="tabs">
  39.                     <div class="tab">
  40.                         <input type="radio" id="tab-1" name="tab-group-1" checked>
  41.                         <label for="tab-1">Descripcion</label>
  42.                         <div class="content">
  43.                             <p>Chanante ipsum dolor sit amet, ut, ex ad. Ju-j· ut
  44.                             tempor quis ullamco horcate piticli dolore quis. Ea ad
  45.                             eveniet hueles avinagrado dolore incididunt dolore sed.</p>
  46.                         </div>
  47.                     </div>
  48.                     <div class="tab">
  49.                         <input type="radio" id="tab-2" name="tab-group-1">
  50.                         <label for="tab-2">Forma de envio</label>
  51.                         <div class="content">
  52.                             <p>Chanante ipsum dolor sit amet, minim ut exercitation
  53.                             ut cosica minim ut eveniet sed, chavalada. Labore eveniet
  54.                             ea forrondosco mangurri·n interneeeer elit enjuto mojamuto.</p>
  55.                             .</p>
  56.                         </div>
  57.                     </div>
  58.                 </div>
  59.             </div>
  60.         </div><!-- TERMINA PRODUCTO -->


Código CSS: 
Ver original
  1. .modalmask {
  2.     margin-top: auto;
  3.     position: fixed;
  4.     top: -6.5%;
  5.     right: 0;
  6.     bottom: 0;
  7.     left: 0;
  8.     background: rgba(0,0,0,0.8);
  9.     z-index: 10000;
  10.     opacity:0;
  11.     -webkit-transition: opacity 400ms ease-in;
  12.     -moz-transition: opacity 400ms ease-in;
  13.     transition: opacity 400ms ease-in;
  14.     pointer-events: none;
  15. }
  16. .modalmask:target {
  17.     opacity:1;
  18.     pointer-events: auto;
  19. }
  20.  
  21. .modalbox-producto{
  22.     position: relative;
  23.     overflow: scroll;
  24.     max-width: 500px;
  25.     min-width:300px;
  26.     max-height: 350px;
  27.     min-height: 480px;
  28.     padding: 5px 20px 13px 20px;
  29.      background: #fff;
  30.     border-radius:3px;
  31.     -webkit-transition: all 500ms ease-in;
  32.     -moz-transition: all 500ms ease-in;
  33.     transition: all 500ms ease-in;
  34. }
  35. /* DATOS DE PRODUCTO */
  36. #datos {
  37.     width: 200px;
  38.     height: 250;
  39.      float: right;
  40. }
  41. h1 {margin: 10px; margin-bottom: 20px;}
  42. h2 {margin: 10px; text-align: right;}
  43. /* GALERIA IMAGENES */
  44. #contenedor-galeria {
  45.     text-align: center;
  46.     position: relative;
  47.     width: 220px;
  48.     height: 250px;
  49.     float: left;
  50.     margin-bottom: 20px;
  51. }
  52. #gallery {display: none;}
  53. #jgal {/*padding:0;margin:0;*/list-style:none; width: 500px;}
  54. #jgal li {
  55.     opacity: .3; filter:alpha(opacity=50);
  56.     float: left;
  57.     /*display: block;*/
  58.     width: 48px;
  59.     height: 84px;
  60.     /*cursor: pointer;*/
  61.     border: 8px solid #fff;
  62.     outline: 1px solid #ddd;
  63.     margin-right: 10px;
  64.     margin-bottom: 10px;
  65. }
  66. #jgal li img { position: absolute; top: 100px; left: 0px; display: none; }
  67. #jgal li.active img {  display: block;  width:220px; }
  68. #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
  69. /* PESTAÑAS PRODUCTO */
  70. .tabs {
  71.     position: relative;
  72.     min-height: 350px;
  73.     clear: both;
  74.     margin: 25px 0;
  75. }
  76. .tab {
  77.     float: left;
  78. }
  79. .tab label {
  80.     background: #eee;
  81.     padding: 10px;
  82.     border: 1px solid #ccc;
  83.     margin-left: -1px;
  84.     position: relative;
  85.     left: 1px;
  86. }
  87. .tab input[type=radio] {
  88.     display: none;
  89. }
  90. .content {
  91.     position: absolute;
  92.     top: 28px;
  93.     left: 0;
  94.     background: white;
  95.     right: 0;
  96.     bottom: 0;
  97.     padding: 20px;
  98.     border: 1px solid #ccc;
  99.     overflow: hidden;
  100.     text-align: justify;
  101. }
  102. .content >
  103.  * {
  104.     display:none;
  105.  
  106. }
  107. .tab input[type=radio]:checked ~ label {
  108.     background: white;
  109.     border-bottom: 1px solid white;
  110.     z-index: 2;
  111. }
  112. .tab input[type=radio]:checked ~ label ~ .content {
  113.     z-index: 1;
  114. }
  115. .tab input[type=radio]:checked ~ label ~ .content >
  116.  * {
  117.     display: block;
  118. }
  119. /* TERMINA PESTAÑAS PRODUCO */
  120.  
  121. /* ANIMACION DE VENTANA */
  122. .movedown {
  123.     margin: 0 auto;
  124. }
  125. .rotate {
  126.     margin: 10% auto;
  127.     -webkit-transform: scale(-5,-5);
  128.     transform: scale(-5,-5);
  129. }
  130. .resize {
  131.     margin: 10% auto;
  132.     width:0;
  133.     height:0;
  134.  
  135. }
  136. .modalmask:target .movedown{
  137.     margin:10% auto;
  138. }
  139. .modalmask:target .rotate{
  140.     transform: rotate(360deg) scale(1,1);
  141.         -webkit-transform: rotate(360deg) scale(1,1);
  142. }
  143.  
  144. .modalmask:target .resize{
  145.     width:400px;
  146.     height:200px;
  147. }
  148.  
  149. /* CERRAR VENTANA */
  150. .close {
  151.     background: #606061;
  152.     color: #FFFFFF;
  153.     line-height: 25px;
  154.     position: absolute;
  155.     right: 5px;
  156.     text-align: center;
  157.     top: 5px;
  158.     width: 24px;
  159.     text-decoration: none;
  160.     font-weight: bold;
  161.     border-radius:3px;
  162.  
  163. }
  164.  
  165. .close:hover {
  166.     background: #FAAC58;
  167.     color:#222;
  168. }
  #4 (permalink)  
Antiguo 22/10/2015, 22:02
 
Fecha de Ingreso: octubre-2015
Ubicación: Mexico, df
Mensajes: 3
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Como usar una sola ventana modal para varios prodcutos
Cita:
Iniciado por quilmes_05 Ver Mensaje
Tendira que ver como estas haciendo el modal, pero supongo que debes tener algo como esto en tu html:

Código HTML: 
Ver original
  1. <div id="modal">
  2.   <div id="titulo"></div>
  3.   <div id="cuerpo"></div>
  4. </div>

Antes de abrir un modal, podrías hacer lo siguiente en Java Script:

Código Javascript: 
Ver original
  1. $('#titulo').html('Nuevo título');
  2. $('#cuerpo').html('Nuevo cuerpo');

Hola que tal gracias por responder, en el html prácticamente es la base que mostraste mas el codigo csss, lo que no entiendo muy bien es de que forma hare llamar a cada elemento, esta seria la plantilla para unos digamos 30 productos, ¿tendria que poner para cada id de la plantilla que quiero que cambie, una linea de codigo en JS?
por ejemplo, ¿en "nombre de producto" tendria que ponerle un id y a parte la linea de codigo en .JS con el id de este y el "nuevo producto" y asi con cada elemento que quiero que cambie?

<h1 id="nombre-producto">NOMBRE DE PRODUCTO</h1>

( $('#nombre-producto').html('Nuevo título'); )

Código HTML: 
Ver original
  1. <div id="promociones-modal"></div><!-- PROMOCIONES -->
  2.         <div id="producto-modal" class="modalmask">
  3.             <div class="modalbox-producto movedown">
  4.                 <a href="#close" title="Close" class="close">X</a>
  5.                 <h1>NOMBRE DE PRODUCTO</h1>
  6.                 <div>
  7.                     <div id="contenedor-galeria">
  8.                         <ul id="gallery">
  9.                         <li><img src="imagenes/Blue Tiger 1.jpg" alt="" /></li>
  10.                         <li><img src="imagenes/caracol manzana.jpg" alt="" /></li>
  11.                         <li><img src="imagenes/CRYPTOCORYNE WENDY.jpg" alt="" /></li>
  12.                         <li><img src="imagenes/echinodorus ozelot 4.jpg" alt="" /></li>
  13.                         </ul>
  14.                     </div>
  15.                     <div id="datos">
  16.                         <div>
  17.                             <p>Nombre Cientifico: Cryptocoryne wendtii “brown"</p>
  18.                             <p>Familia: Araceae.</p>
  19.                             <p>Distribución: Originaria del sudeste de Asia, Sri Lanka.</p>
  20.                             <p>Tamaño:de 10 a 15 cm de altura</p>
  21.                             <h2>$130</h2>
  22.                         </div>
  23.                         <div>
  24.                             <p>CANTIDAD</p>
  25.                             <input class="cantidad" type="number" placeholder="Ingresar cantidad">
  26.                             <button class="boton" type="button" >Agregar a mi carro</button>
  27.                         </div>
  28.                     </div>
  29.                 </div>
  30.                 <div>
  31.                     <ul id="gallery">
  32.                         <li><img src="imagenes/Blue Tiger 1.jpg" alt="" /></li>
  33.                         <li><img src="imagenes/caracol manzana.jpg" alt="" /></li>
  34.                         <li><img src="imagenes/CRYPTOCORYNE WENDY.jpg" alt="" /></li>
  35.                         <li><img src="imagenes/echinodorus ozelot 4.jpg" alt="" /></li>
  36.                     </ul>
  37.                 </div>
  38.                 <div class="tabs">
  39.                     <div class="tab">
  40.                         <input type="radio" id="tab-1" name="tab-group-1" checked>
  41.                         <label for="tab-1">Descripcion</label>
  42.                         <div class="content">
  43.                             <p>Chanante ipsum dolor sit amet, ut, ex ad. Ju-j· ut
  44.                             tempor quis ullamco horcate piticli dolore quis. Ea ad
  45.                             eveniet hueles avinagrado dolore incididunt dolore sed.</p>
  46.                         </div>
  47.                     </div>
  48.                     <div class="tab">
  49.                         <input type="radio" id="tab-2" name="tab-group-1">
  50.                         <label for="tab-2">Forma de envio</label>
  51.                         <div class="content">
  52.                             <p>Chanante ipsum dolor sit amet, minim ut exercitation
  53.                             ut cosica minim ut eveniet sed, chavalada. Labore eveniet
  54.                             ea forrondosco mangurri·n interneeeer elit enjuto mojamuto.</p>
  55.                             .</p>
  56.                         </div>
  57.                     </div>
  58.                 </div>
  59.             </div>
  60.         </div><!-- TERMINA PRODUCTO -->


Código CSS: 
Ver original
  1. .modalmask {
  2.     margin-top: auto;
  3.     position: fixed;
  4.     top: -6.5%;
  5.     right: 0;
  6.     bottom: 0;
  7.     left: 0;
  8.     background: rgba(0,0,0,0.8);
  9.     z-index: 10000;
  10.     opacity:0;
  11.     -webkit-transition: opacity 400ms ease-in;
  12.     -moz-transition: opacity 400ms ease-in;
  13.     transition: opacity 400ms ease-in;
  14.     pointer-events: none;
  15. }
  16. .modalmask:target {
  17.     opacity:1;
  18.     pointer-events: auto;
  19. }
  20.  
  21. .modalbox-producto{
  22.     position: relative;
  23.     overflow: scroll;
  24.     max-width: 500px;
  25.     min-width:300px;
  26.     max-height: 350px;
  27.     min-height: 480px;
  28.     padding: 5px 20px 13px 20px;
  29.      background: #fff;
  30.     border-radius:3px;
  31.     -webkit-transition: all 500ms ease-in;
  32.     -moz-transition: all 500ms ease-in;
  33.     transition: all 500ms ease-in;
  34. }
  35. /* DATOS DE PRODUCTO */
  36. #datos {
  37.     width: 200px;
  38.     height: 250;
  39.      float: right;
  40. }
  41. h1 {margin: 10px; margin-bottom: 20px;}
  42. h2 {margin: 10px; text-align: right;}
  43. /* GALERIA IMAGENES */
  44. #contenedor-galeria {
  45.     text-align: center;
  46.     position: relative;
  47.     width: 220px;
  48.     height: 250px;
  49.     float: left;
  50.     margin-bottom: 20px;
  51. }
  52. #gallery {display: none;}
  53. #jgal {/*padding:0;margin:0;*/list-style:none; width: 500px;}
  54. #jgal li {
  55.     opacity: .3; filter:alpha(opacity=50);
  56.     float: left;
  57.     /*display: block;*/
  58.     width: 48px;
  59.     height: 84px;
  60.     /*cursor: pointer;*/
  61.     border: 8px solid #fff;
  62.     outline: 1px solid #ddd;
  63.     margin-right: 10px;
  64.     margin-bottom: 10px;
  65. }
  66. #jgal li img { position: absolute; top: 100px; left: 0px; display: none; }
  67. #jgal li.active img {  display: block;  width:220px; }
  68. #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
  69. /* PESTAÑAS PRODUCTO */
  70. .tabs {
  71.     position: relative;
  72.     min-height: 350px;
  73.     clear: both;
  74.     margin: 25px 0;
  75. }
  76. .tab {
  77.     float: left;
  78. }
  79. .tab label {
  80.     background: #eee;
  81.     padding: 10px;
  82.     border: 1px solid #ccc;
  83.     margin-left: -1px;
  84.     position: relative;
  85.     left: 1px;
  86. }
  87. .tab input[type=radio] {
  88.     display: none;
  89. }
  90. .content {
  91.     position: absolute;
  92.     top: 28px;
  93.     left: 0;
  94.     background: white;
  95.     right: 0;
  96.     bottom: 0;
  97.     padding: 20px;
  98.     border: 1px solid #ccc;
  99.     overflow: hidden;
  100.     text-align: justify;
  101. }
  102. .content >
  103.  * {
  104.     display:none;
  105.  
  106. }
  107. .tab input[type=radio]:checked ~ label {
  108.     background: white;
  109.     border-bottom: 1px solid white;
  110.     z-index: 2;
  111. }
  112. .tab input[type=radio]:checked ~ label ~ .content {
  113.     z-index: 1;
  114. }
  115. .tab input[type=radio]:checked ~ label ~ .content >
  116.  * {
  117.     display: block;
  118. }
  119. /* TERMINA PESTAÑAS PRODUCO */
  120.  
  121. /* ANIMACION DE VENTANA */
  122. .movedown {
  123.     margin: 0 auto;
  124. }
  125. .rotate {
  126.     margin: 10% auto;
  127.     -webkit-transform: scale(-5,-5);
  128.     transform: scale(-5,-5);
  129. }
  130. .resize {
  131.     margin: 10% auto;
  132.     width:0;
  133.     height:0;
  134.  
  135. }
  136. .modalmask:target .movedown{
  137.     margin:10% auto;
  138. }
  139. .modalmask:target .rotate{
  140.     transform: rotate(360deg) scale(1,1);
  141.         -webkit-transform: rotate(360deg) scale(1,1);
  142. }
  143.  
  144. .modalmask:target .resize{
  145.     width:400px;
  146.     height:200px;
  147. }
  148.  
  149. /* CERRAR VENTANA */
  150. .close {
  151.     background: #606061;
  152.     color: #FFFFFF;
  153.     line-height: 25px;
  154.     position: absolute;
  155.     right: 5px;
  156.     text-align: center;
  157.     top: 5px;
  158.     width: 24px;
  159.     text-decoration: none;
  160.     font-weight: bold;
  161.     border-radius:3px;
  162.  
  163. }
  164.  
  165. .close:hover {
  166.     background: #FAAC58;
  167.     color:#222;
  168. }
  #5 (permalink)  
Antiguo 30/10/2015, 13:53
 
Fecha de Ingreso: octubre-2010
Mensajes: 219
Antigüedad: 14 años, 2 meses
Puntos: 2
Respuesta: Como usar una sola ventana modal para varios prodcutos
Mirá podes seguir este tuto: http://programacionextrema.com/2015/...-en-bootstrap/ creo que es justo lo que queres. Ahí usa bootstrap pero lo podes adaptar a tu código.

Etiquetas: modal, tienda, ventana
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 08:18.