4

En el siguiente ejemplo al hacer click en el botón con id (#myBtn) me abre perfecto un modal y su contenido.

Mi pregunta: Que debo modificar y/o agregar para poder tener varios botones y me abra el contenidos en diferentes modales. Espero que se entienda.

var modal = document.getElementById('myModal');

var btn = document.getElementById('myBtn');

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';
  }
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ }

/* 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; }
<button id='myBtn' class='datos'>informacion</button>
<div id='myModal' class='modal'>
  <div class='modal-content'>
    <span class='close'>&times;</span>
    <p><b>Titulo 1</b>
  </div>
</div>

4
  • No queda del todo claro lo que buscas lograr Commented el 10 sept. 2018 a las 18:32
  • Si el contenido es diferente para cada modal tienes dos opciones: 1. Crear un modal para cada contenido 2. Cambiar el contenido de un solo modal programaticamente en javascript.
    – alanfcm
    Commented el 10 sept. 2018 a las 18:33
  • Hola @alanfcm si ten entiendo y es lo que hice pero no funciona
    – juan pablo
    Commented el 10 sept. 2018 a las 18:42
  • que es lo que tuviera que copiar, para crear dos botones por ejemplo?
    – juan pablo
    Commented el 10 sept. 2018 a las 18:59

1 respuesta 1

0

Este es un ejemplo con javascript. Si tu intencion es usar mas de dos modales, quizas sea mejor que aprendas jQuery para que sea mas facil manejar los click handlers usando clases y no tengas que repetir tanto codigo.

var modal = document.getElementById('myModal');
var modal2 = document.getElementById('myModal2');

var btn = document.getElementById('myBtn');
var btn2 = document.getElementById('myBtn2');

var span = document.getElementsByClassName('close')[0];
var span2 = document.getElementsByClassName('close')[1];

btn.onclick = function() {
  modal.style.display = 'block';
}
btn2.onclick = function() {
  modal2.style.display = 'block';
}

span.onclick = function() {
  modal.style.display = 'none';
}
span2.onclick = function() {
  modal2.style.display = 'none';
}

window.onclick = function(event) {
  if (event.target == modal || event.target == modal2) {
    modal.style.display = 'none';
    modal2.style.display = 'none';
  }
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ }

/* 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; }
<button id='myBtn' class='datos'>informacion</button>
<div id='myModal' class='modal'>
  <div class='modal-content'>
    <span class='close'>&times;</span>
    <p><b>Titulo 1</b>
  </div>
</div>
<button id='myBtn2' class='datos'>informacion2</button>
<div id='myModal2' class='modal'>
  <div class='modal-content'>
    <span class='close'>&times;</span>
    <p><b>Titulo 2</b>
  </div>
</div>

3
  • ok, gracias @alanfcm el unico inconveniente que encontre es que al hacer click en el boton dos y luego cerrarlo no se cierra tocando un clik fuera de la caja.
    – juan pablo
    Commented el 10 sept. 2018 a las 19:10
  • Ya edite mi respuesta. Solo una cosa, es una buena practica aceptar las respuestas que te han ayudado para que la comunidad te siga apoyando.
    – alanfcm
    Commented el 10 sept. 2018 a las 21:59
  • 1
    Muy amable, muchas gracias. has solucionado mi problema. saludos.
    – juan pablo
    Commented el 10 sept. 2018 a las 22:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.