Ver Mensaje Individual
  #3 (permalink)  
Antiguo 10/01/2018, 11:17
Blasgo
 
Fecha de Ingreso: abril-2010
Ubicación: Lima
Mensajes: 116
Antigüedad: 14 años
Puntos: 1
Respuesta: Abrir mas de un modal

Le cambie de nombre al id del sgdo botón y al div y no abre tampoco.
css:
Código CSS:
Ver original
  1. .modal {display: none;
  2.     position: fixed;
  3.     z-index: 1;
  4.     padding-top: 100px;
  5.     left: 0;
  6.     top: 0;
  7.     width: 100%;
  8.     height: 100%;
  9.     overflow: auto;
  10.     background-color: rgb(0,0,0);
  11.     background-color: rgba(0,0,0,0.4);
  12.      -webkit-transition: opacity 400ms ease-in;
  13. -moz-transition: opacity 400ms ease-in;
  14. transition: opacity 400ms ease-in;}
  15. /* Modal Content */
  16. .modal-content {background-color: #fefefe;
  17.     margin: auto;
  18.     padding: 20px;
  19.     border: 1px solid #888;
  20.     width: 80%;}
  21. /* The Close Button */
  22. .close {color: #aaaaaa;
  23.     float: right;
  24.     font-size: 28px;
  25.     font-weight: bold;}
  26. .close:hover,
  27. .close:focus {color: #000;
  28.     text-decoration: none;
  29.     cursor: pointer;}

Html:
Código HTML:
Ver original
  1. <button id="myBtn">Abrir Modal</button>
  2. <!-- The Modal -->
  3. <div id="myModal" class="modal">
  4.   <div class="modal-content">
  5.     <span class="close">&times;</span>
  6.     <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>
  7.   </div>
  8. </div>
  9.  
  10. <button id="myBtn2">Abrir otro Modal</button>
  11. <div id="myModal2" class="modal">
  12.   <div class="modal-content">
  13.     <span class="close">&times;</span>
  14.     <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>
  15.   </div>
  16. </div>

Java:
Código Javascript:
Ver original
  1. // Get the modal
  2. var modal = document.getElementById('myModal','myModal2');
  3. var btn = document.getElementById("myBtn","myBtn2");
  4. var span = document.getElementsByClassName("close")[0];
  5. btn.onclick = function() {
  6.     modal.style.display = "block";
  7. }
  8. span.onclick = function() {
  9.     modal.style.display = "none";
  10. }
  11. window.onclick = function(event) {
  12.     if (event.target == modal) {
  13.         modal.style.display = "none";
  14.     }
  15. }

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