Skip to main content
se añadieron 26 caracteres en el cuerpo
Origen Enlace
alanfcm
  • 20.9k
  • 11
  • 19
  • 35
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>
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) {
    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>
<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>
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>
Origen Enlace
alanfcm
  • 20.9k
  • 11
  • 19
  • 35

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) {
    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>
<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>