Abrir mas de un modal

[Blasgo]

Hola amigos
Quiero poner mas de una ventana modal en una sola página.
Con un botón si funciona normal, pero cuando quiero agregar otro botón con otro contenido, este último ya no abra la ventana.
Intente duplicar los scripts y no me ha funcionado.
Este es el enlace donde quiero aplicar mas de una ventana modal.

Espero puedan ayudarme

[Alexis88]

El error está en que utilizas dos elementos con el mismo id siendo que el valor de este atributo debe ser único en todo el documento.

Puedes usar un id distinto para el segundo <div> o bien puedes usar una clase (que sí puede repetirse) y tomar al <div> con la propiedad .nextElementSibling aplicada en el botón, aunque hay otras formas más elegantes y eficientes de hacer esto.

Posdata: La próxima vez publica el código aquí.

[Blasgo]

Le cambie de nombre al id del sgdo botón y al div y no abre tampoco.
css:

Código CSS:

.modal {display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
     -webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;}
/* Modal Content */
.modal-content {background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;}
/* The Close Button */
.close {color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;}
.close:hover,
.close:focus {color: #000;
    text-decoration: none;
    cursor: pointer;}
 

Html:

Código HTML:

<button id="myBtn">Abrir Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Un intercomunicador es un dispositivo de intercomunicación. Puede definirse como un sistema independiente de comunicación electrónica destinado a un diálogo limitado o privado. Los intercomunicadores pueden ser portátiles, pero son generalmente instalados permanentemente en negocios, edificios y hogares. </p>
  </div>
</div>
 
<button id="myBtn2">Abrir otro Modal</button>
<div id="myModal2" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Detección de fugas eléctricas con meghómetro, instalaciones eléctricas en general, cableados, mediciones eléctricas, tableros thermomagnéticas, balanceos de carga, instalaciones de MT,BT. Protocolos de mediciones eléctricas.</p>
  </div>
</div>
 

Java:

Código Javascript:

// Get the modal
var modal = document.getElementById('myModal','myModal2');
var btn = document.getElementById("myBtn","myBtn2");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
 

Que es lo que necesito cambiar o agregar para que funcionen ambas ventanas modales.
Agradeceré mucho tu ayuda

[Alexis88]

El método .getElementById() solo puede recibir un parámetro que es el identificador del elemento que se desea tomar. Bien puedes repetir el código: un bloque para "myModal" y otro idéntico para "myModal2", o puedes construir una función que tenga dicho bloque de código pero que reciba el identificador como parámetro para que así no tengas que repetir el código. Como veo que no solo se trata de la ventana modal sino también del botón y otros elementos, te convendría trabajar con los identificadores respectivos como parámetros de la función.

[xfxstudios]

Has estos cambios a ver, estan con jquery:

Código HTML:

<h2>Ejemplos</h2>
<button data-modal="myModal" class="boton" id="myBtn">Abrir Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Un intercomunicador es un dispositivo de intercomunicación. Puede definirse como un sistema independiente de comunicación electrónica destinado a un diálogo limitado o privado. Los intercomunicadores pueden ser portátiles, pero son generalmente instalados permanentemente en negocios, edificios y hogares. </p>
  </div>
</div>
 
<button data-modal="myModal2" class="boton" id="myBtn2">Abrir otro Modal</button>
<div id="myModal2" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Detección de fugas eléctricas con meghómetro, instalaciones eléctricas en general, cableados, mediciones eléctricas, tableros thermomagnéticas, balanceos de carga, instalaciones de MT,BT. Protocolos de mediciones eléctricas.</p>
  </div>
</div>
 

Código Javascript:

$('.boton').click(function(){
        var id = $(this).attr('data-modal');
    $("#"+id).css('display','block');
});
 
$(".close").click(function(){
        $(this).parent().parent().css('display','none');
})
 
$(".modal").click(function(event) {
        $(this).css('display','none')
})
 

en CSS queda igual

MUESTRA

[caricatos]

Hola:

Veo absurdo cargar una librería para lo que podría resolverse con 4 líneas...

Por ejemplo para el primer botón podría ser este código:

Código:

document.getElementById("myBtn").onclick = function(){document.getElementById("myModal").style.display = "block"}

Saludos

[Fuzzylog]

Incluso se puede hacer sin js, solo con css

http://jsfiddle.net/3Vykc/