Несколько модальных Js Css на одной странице

Я должен использовать до 2 разных модалов на одной странице, и один и тот же всегда стреляет в меня, что является последним из Js. Я покажу вам дело. Я надеюсь, что вы можете помочь мне, большое спасибо!

< script type = "text/javascript" >
  // Modal SM
  var modal = document.getElementById('ModalAddToBagSm');
var btn = document.getElementById("BtnModalAddToBagSm");
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 Md
var modal = document.getElementById('ModalAddToBagMd');
var btn = document.getElementById("BtnModalAddToBagMd");
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";
  }
} < /script>
<div class="btn-wrap">
    <input type="button" class="button-1 add-to-cart-button hidden-sm hidden-xs" value="Add to bag md" id="BtnModalAddToBagMd" />
    <input type="button" class="button-1 add-to-cart-button hidden-md hidden-lg" value="Add to bag" id="BtnModalAddToBagSm" />
    <a class="checkout-button ico-cart" href="/cart">Checkout</a>
  </div>

  <!-- MODAL MD -->
  <div id="ModalAddToBagMd" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <img src="images/0000437_classic-fit-sports-polo_600.jpeg" alt="" class="img-responsive img-modal">
      <div class="txt-modal">
        <div class="msj-modal">JUST ADDED TO YOUR BASKET</div>
        <ul>
          <li>
            <h1>GRAPHIC HOODY</h1>
          </li>
          <li><strong class="price">£45.83 (inc. VAT) / per unit</strong>
          </li>
          <li class="attributeInfo">Colour: Red</li>
          <li class="attributeInfo">Size: XS</li>
          <li class="attributeInfo">Quantity : 1</li>
        </ul>
        <div>
          <input type="submit" class="btn-go-cart" value="Go to cart" onclick="">
        </div>
        <a href="">CONTINUE SHOPPING</a>
      </div>
    </div>
  </div>
  <!-- MODAL SM -->
  <div id="ModalAddToBagSm" class="modal-bot">
    <div class="modal-content-bot">
      <span class="close-bot">&times;</span>
      <p>Some text in the Modal..</p>
    </div>
  </div>

× ТОЛЬКО ДОБАВЛЕНО ВАМ КОРЗИНА

  • ГРАФИЧЕСКАЯ КУХНЯ

  • £ 45,83 (с НДС) / за единицу
  • Цвет: Красный Размер: XS Количество: 1
ПРОДОЛЖИТЬ ПОКУПКА ×

Некоторый текст в Модале ..

Js:

0
задан 14.01.2017, 02:37
0 ответов

Твоя проблема состоит в том, что ты sobreescribiendo переменные modal, btn и span.

var modal = document.getElementById('ModalAddToBagSm');
var btn = document.getElementById("BtnModalAddToBagSm");
var span = document.getElementsByClassName("close")[0];

... más abajo

var modal = document.getElementById('ModalAddToBagMd');
var btn = document.getElementById("BtnModalAddToBagMd");
var span = document.getElementsByClassName("close")[0];

То, что он перемещает, состоит в том, что в sobreescribir переменные, ты sobreescribiendo также listeners. Ты был бы должен использовать единственное имя для каждой переменной:

var modalSm = ...
var modalMd = ...

Но предыдущее избыточное. Лучшее состоит в том, чтобы добавлять признак target кнопка, которая снабжает ссылками модальную.

<button target="ModalAddToBagSm">Abrir modal</button>

И добавлять единственный listener.

let buttons = document.querySelectorAll('button[target]');
[].forEach.call(buttons, function (button) {
  button.addEventListener('click', function () {
    let target = button.getAttribute('target');
    let modal = document.getElementById(target);
    modal.style.display = 'block';
    let closeBtn = modal.querySelector('.close');
    closeBtn.onclick = function () { modal.style.display = 'none'; }
  });
});
0
ответ дан 03.12.2019, 17:41

Теги

Похожие вопросы