Como usar una sola ventana modal para varios prodcutos

[Serrato]

Iniciado por quilmes_05

Tendira que ver como estas haciendo el modal, pero supongo que debes tener algo como esto en tu html:

Código HTML:

<div id="modal">
  <div id="titulo"></div>
  <div id="cuerpo"></div>
</div>
 

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

Código Javascript:

$('#titulo').html('Nuevo título');
$('#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:

<div id="promociones-modal"></div><!-- PROMOCIONES -->
        <div id="producto-modal" class="modalmask">
            <div class="modalbox-producto movedown">
                <a href="#close" title="Close" class="close">X</a>
                <h1>NOMBRE DE PRODUCTO</h1>
                <div>
                    <div id="contenedor-galeria">
                        <ul id="gallery">
                        <li><img src="imagenes/Blue Tiger 1.jpg" alt="" /></li>
                        <li><img src="imagenes/caracol manzana.jpg" alt="" /></li>
                        <li><img src="imagenes/CRYPTOCORYNE WENDY.jpg" alt="" /></li>
                        <li><img src="imagenes/echinodorus ozelot 4.jpg" alt="" /></li>
                        </ul>
                    </div>
                    <div id="datos">
                        <div>
                            <p>Nombre Cientifico: Cryptocoryne wendtii “brown"</p>
                            <p>Familia: Araceae.</p>
                            <p>Distribución: Originaria del sudeste de Asia, Sri Lanka.</p>
                            <p>Tamaño:de 10 a 15 cm de altura</p>
                            <h2>$130</h2>
                        </div>
                        <div>
                            <p>CANTIDAD</p>
                            <input class="cantidad" type="number" placeholder="Ingresar cantidad">
                            <button class="boton" type="button" >Agregar a mi carro</button>
                        </div>
                    </div>
                </div>
                <div>
                    <ul id="gallery">
                        <li><img src="imagenes/Blue Tiger 1.jpg" alt="" /></li>
                        <li><img src="imagenes/caracol manzana.jpg" alt="" /></li>
                        <li><img src="imagenes/CRYPTOCORYNE WENDY.jpg" alt="" /></li>
                        <li><img src="imagenes/echinodorus ozelot 4.jpg" alt="" /></li>
                    </ul>
                </div>
                <div class="tabs">
                    <div class="tab">
                        <input type="radio" id="tab-1" name="tab-group-1" checked>
                        <label for="tab-1">Descripcion</label>
                        <div class="content">
                            <p>Chanante ipsum dolor sit amet, ut, ex ad. Ju-j· ut
                            tempor quis ullamco horcate piticli dolore quis. Ea ad
                            eveniet hueles avinagrado dolore incididunt dolore sed.</p>
                        </div>
                    </div>
                    <div class="tab">
                        <input type="radio" id="tab-2" name="tab-group-1">
                        <label for="tab-2">Forma de envio</label>
                        <div class="content">
                            <p>Chanante ipsum dolor sit amet, minim ut exercitation
                            ut cosica minim ut eveniet sed, chavalada. Labore eveniet
                            ea forrondosco mangurri·n interneeeer elit enjuto mojamuto.</p>
                            .</p>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- TERMINA PRODUCTO -->
 

Código CSS:

.modalmask {
    margin-top: auto;
    position: fixed;
    top: -6.5%;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 10000;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalmask:target {
    opacity:1;
    pointer-events: auto;
}
 
.modalbox-producto{
    position: relative;
    overflow: scroll;
    max-width: 500px;
    min-width:300px;
    max-height: 350px;
    min-height: 480px;
    padding: 5px 20px 13px 20px;
     background: #fff;
    border-radius:3px;
    -webkit-transition: all 500ms ease-in;
    -moz-transition: all 500ms ease-in;
    transition: all 500ms ease-in;
}
/* DATOS DE PRODUCTO */
#datos {
    width: 200px;
    height: 250;
     float: right;
}
h1 {margin: 10px; margin-bottom: 20px;}
h2 {margin: 10px; text-align: right;}
/* GALERIA IMAGENES */
#contenedor-galeria {
    text-align: center;
    position: relative;
    width: 220px;
    height: 250px;
    float: left;
    margin-bottom: 20px;
}
#gallery {display: none;}
#jgal {/*padding:0;margin:0;*/list-style:none; width: 500px;}
#jgal li {
    opacity: .3; filter:alpha(opacity=50);
    float: left;
    /*display: block;*/
    width: 48px;
    height: 84px;
    /*cursor: pointer;*/
    border: 8px solid #fff;
    outline: 1px solid #ddd;
    margin-right: 10px;
    margin-bottom: 10px;
}
#jgal li img { position: absolute; top: 100px; left: 0px; display: none; }
#jgal li.active img {  display: block;  width:220px; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
/* PESTAÑAS PRODUCTO */
.tabs {
    position: relative;
    min-height: 350px;
    clear: both;
    margin: 25px 0;
}
.tab {
    float: left;
}
.tab label {
    background: #eee;
    padding: 10px;
    border: 1px solid #ccc;
    margin-left: -1px;
    position: relative;
    left: 1px;
}
.tab input[type=radio] {
    display: none;
}
.content {
    position: absolute;
    top: 28px;
    left: 0;
    background: white;
    right: 0;
    bottom: 0;
    padding: 20px;
    border: 1px solid #ccc;
    overflow: hidden;
    text-align: justify;
}
.content >
 * {
    display:none;
 
}
.tab input[type=radio]:checked ~ label {
    background: white;
    border-bottom: 1px solid white;
    z-index: 2;
}
.tab input[type=radio]:checked ~ label ~ .content {
    z-index: 1;
}
.tab input[type=radio]:checked ~ label ~ .content >
 * {
    display: block;
}
/* TERMINA PESTAÑAS PRODUCO */
 
/* ANIMACION DE VENTANA */
.movedown {
    margin: 0 auto;
}
.rotate {
    margin: 10% auto;
    -webkit-transform: scale(-5,-5);
    transform: scale(-5,-5);
}
.resize {
    margin: 10% auto;
    width:0;
    height:0;
 
}
.modalmask:target .movedown{
    margin:10% auto;
}
.modalmask:target .rotate{
    transform: rotate(360deg) scale(1,1);
        -webkit-transform: rotate(360deg) scale(1,1);
}
 
.modalmask:target .resize{
    width:400px;
    height:200px;
}
 
/* CERRAR VENTANA */
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: 5px;
    text-align: center;
    top: 5px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    border-radius:3px;
 
}
 
.close:hover {
    background: #FAAC58;
    color:#222;
}