En el siguiente ejemplo al hacer clickclick
en el botonbotón con id (myBtn#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. Muchas gracias.
HTML
<button id='myBtn' class='datos'>informacion</button>
<div id='myModal' class='modal'>
<div class='modal-content'>
<span class='close'>×</span>
<p><b>Titulo 1</b>
</div>
</div>
javascript
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';
}
}
css
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'>×</span>
<p><b>Titulo 1</b>
</div>
</div>
.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; }