0

Tengo que usar en una misma página hasta 2 modals distintos y siempre me dispara el mismo, que es el último de los Js. Les muestro el caso. Espero que me puedan ayuda, muchas gracias!

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

× JUST ADDED TO YOUR BASKET

  • GRAPHIC HOODY

  • £45.83 (inc. VAT) / per unit
  • Colour: Red Size: XS Quantity : 1
CONTINUE SHOPPING ×

Some text in the Modal..

Js:

10
  • 1
    Estás sobreescribiendo las variables modal, btn y span. Dale un nombre para cada uno.
    – gugadev
    el 14 ene. 2017 a las 1:03
  • Gracias Guz, sinceramente de Js no entiendo mucho. Acabo de modificarlo así y tampoco funciona, se sigue disparando sólo el último modal. Vos decís que cambie los var de uno de los modals? ejemplo // Modal SM var modalsm var btnsm var spansm btnsm.onclick spansm.onclick window.onclick // Modal Md var modalmd var btnmd var spanmd btnmd.onclick spanmd.onclick window.onclick el 14 ene. 2017 a las 1:29
  • Es correcto, me refiero a eso. Haciendo eso debería solucionarse, ya que spansm será diferente a spanmd y harán acciones diferentes. No tuviese sentido si, en spansm teniendo en el onclick que se abra modalsm, se abra modalmd.
    – gugadev
    el 14 ene. 2017 a las 1:32
  • Lo solucionaste?
    – bypabloc_
    el 14 ene. 2017 a las 6:12
  • Hola, no pude solucionarlo todavía. Sigue viéndose el siempre el modal que esta ubicado ultimo en el script. Les dejo el enlace de como esta ahora jsfiddle.net/mauriciodtovar/j2sxqjr1 Muchas gracias! el 14 ene. 2017 a las 16:53

1 respuesta 1

0

Tu problema es que estás sobreescribiendo las variables modal, btn y 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];

Lo que está pasando es que al sobreescribir las variables, estás sobreescribiendo también los listeners. Deberías usar un nombre único para cada variable:

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

Pero lo anterior es redundante. Lo mejor es agregar un atributo target el botón que referencie a la modal.

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

Y agregar un solo 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'; }
  });
});

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.