Как открыть больше модалов на той же странице

Question

Мне бы хотелось, чтобы две кнопки открыли модальное, и еще две, чтобы открыть другую, но я не могу заставить его работать.

var modal = document.getElementById('modal');
var btns = document.querySelectorAll('.pack.detail');
var span = document.getElementsByClassName("close")[0];

[].forEach.call(btns, function(el) {
  el.onclick = function() {
  var id = el.id;
  alert(id);
      modal.style.display = "block";
  }
})
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}


var modal = document.getElementById('modal2');
var btns = document.querySelectorAll('.pack.detail');
var span = document.getElementsByClassName("close")[0];

[].forEach.call(btns, function(el) {
  el.onclick = function() {
  var id = el.id;
  alert(id);
      modal.style.display = "block";
  }
})
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

/* Modal */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    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 */
    -webkit-animation-name: fadeIn; /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
}

/* Content */
.modal-content {
    position: fixed;
    bottom: 0;
    background-color: #fefefe;
    width: 100%;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s
}

/* Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover, .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {
	padding: 2px 16px;
}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

<button class="pack detail" id="1">Open modal 1</button>
<button class="pack detail" id="2">Open modal 2</button>

<!-- Modal 1 -->
<div id="modal" class="modal">
	<div class="modal-content">
		<!-- Header -->
		<div class="modal-header">
			<span class="close">&times</span>
			<h2>Modal Header</h2>
		</div>
		<!-- Body -->
		<div class="modal-body">
			<p>Some text in the Modal Body</p>
			<p>Some other text...</p>
		</div>
		<!-- Footer -->
		<div class="modal-footer">
			<h3>Modal Footer</h3>
		</div>
	</div>
</div>

<!-- Modal 2 -->
<div id="modal2" class="modal">
	<div class="modal-content">
		<!-- Header -->
		<div class="modal-header">
			<span class="close">&times</span>
			<h2>Modal Header2</h2>
		</div>
		<!-- Body -->
		<div class="modal-body">
			<p>Some text in the Modal Body2</p>
			<p>Some other text...</p>
		</div>
		<!-- Footer -->
		<div class="modal-footer">
			<h3>Modal Footer2</h3>
		</div>
	</div>
</div>

Я не понимаю, почему второй модал все равно открывается. Мне нужно, чтобы открыть разные модальные для каждой кнопки с идентификатором, сгенерированным базой данных mysql. Я уже видел много других сообщений, но я не могу адаптировать их к своим потребностям. Пожалуйста, без Bootstrap.

Answer 1

Вам нужно добавить динамичность, чтобы избежать повторения кода, так как вы сказали, что получаете идентификаторы ваших кнопок из базы данных. Чтобы это работало, каждый идентификатор вашей кнопки должен совпадать с идентификатором модального режима, который он пытается открыть.

HTML

<button class="pack detail" id="1">Open modal 1</button>
<button class="pack detail" id="2">Open modal 2</button>

<!-- Modal 1 -->
<div id="modal1" class="modal">
    <div class="modal-content">
        <!-- Header -->
        <div class="modal-header">
            <span class="close" data-modal='modal1'>&times</span>
            <h2>Modal Header</h2>
        </div>
        <!-- Body -->
        <div class="modal-body">
            <p>Some text in the Modal Body</p>
            <p>Some other text...</p>
        </div>
        <!-- Footer -->
        <div class="modal-footer">
            <h3>Modal Footer</h3>
        </div>
    </div>
</div>

<!-- Modal 2 -->
<div id="modal2" class="modal">
    <div class="modal-content">
        <!-- Header -->
        <div class="modal-header">
            <span class="close" data-modal='modal2'>&times</span>
            <h2>Modal Header2</h2>
        </div>
        <!-- Body -->
        <div class="modal-body">
            <p>Some text in the Modal Body2</p>
            <p>Some other text...</p>
        </div>
        <!-- Footer -->
        <div class="modal-footer">
            <h3>Modal Footer2</h3>
        </div>
    </div>
</div>

Javascript

var btns = document.querySelectorAll('.pack.detail');
var spans = document.querySelectorAll(".close");

btns.forEach(function(el) {
  el.onclick = function() {
    var id = el.id;
    var modal = document.getElementById('modal' + id);

    alert(id);
    modal.style.display = "block";
  }
})

spans.forEach(function(span) {
  span.onclick = function(event) {
    var modal = document.getElementById(event.target.dataset.modal);
    modal.style.display = "none";    
  }
})

window.onclick = function(event) {
    var modal = document.querySelector('.modal');

    if (event.target == modal) {
        modal.style.display = "none";
    }
}

Answer 2

Я предполагаю, что это связано с тем, как вы пытаетесь повторно использовать имена переменных modal, btns и span. Вы можете переименовать эти переменные ... однако вы также можете сделать свой код более эффективным.

Я в основном установил идентификатор первого модального ряда, включив в него # 1. Так что теперь мы можем использовать id кнопки для добавления, чтобы вызвать правильный модал.

Я прокомментировал все строки.

// get all the buttons
var btns = document.querySelectorAll('.pack.detail');
// get all the close spans
var span = document.querySelectorAll('span.close');

// using your original forEach
[].forEach.call(btns, function(el) {
  el.onclick = function() {
    // Get the button id.
    var id = el.id;
    // Get the modal using the modal ID AND the button id.
    var modal = document.getElementById('modal' + id);
    // Now we display the correct modal.
    modal.style.display = "block";
  }
});

// All the close spans
[].forEach.call(span, function(el) {
  el.onclick = function() {
    // Get the closest parent with the class .modal
    var current_modal = el.closest('.modal');
    // set the display to none.
    current_modal.style.display = "none";
  }
});

// on window click, if the target has the class modal.
window.onclick = function(event) {
  if (event.target.className == 'modal') {
    // close the modal that's open.
    event.target.style.display = "none";
  }
}

/* Modal */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  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 */
  -webkit-animation-name: fadeIn;
  /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}


/* Content */

.modal-content {
  position: fixed;
  bottom: 0;
  background-color: #fefefe;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}


/* Close Button */

.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {
  padding: 2px 16px;
}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

<button class="pack detail" id="1">Open modal 1</button>
<button class="pack detail" id="2">Open modal 2</button>

<!-- Modal 1 -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <!-- Header -->
    <div class="modal-header">
      <span class="close">&times</span>
      <h2>Modal Header</h2>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <!-- Footer -->
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>
</div>

<!-- Modal 2 -->
<div id="modal2" class="modal">
  <div class="modal-content">
    <!-- Header -->
    <div class="modal-header">
      <span class="close">&times</span>
      <h2>Modal Header2</h2>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <p>Some text in the Modal Body2</p>
      <p>Some other text...</p>
    </div>
    <!-- Footer -->
    <div class="modal-footer">
      <h3>Modal Footer2</h3>
    </div>
  </div>
</div>