Use Modal for several buttons with javascript

Question

Use Modal for several buttons with javascript

Navigation

#1 by (0 votes)

4

In the following example, doing click on the button with id ( #myBtn ) opens a perfect modal and its content.

My question: What should I modify and / or add in order to have several buttons and open the contents in different manners. I hope you understand.

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>

javascript

asked by juan pablo 10.09.2018 в 20:29

source

1 answer

Query about the web address that you see in the browser bar predefined iterables: implications with the length property and the access operator []

score 0 · Accepted Answer

This is an example with javascript. If your intention is to use more than two manners, maybe it is better to learn jQuery so that it is easier to handle the click handlers using classes and you do not have to repeat so much code.

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>