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
    Commented 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 Commented 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
    Commented el 14 ene. 2017 a las 1:32
  • Lo solucionaste?
    – bypabloc_
    Commented 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! Commented 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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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