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">×</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">×</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
Some text in the Modal..
Js:
modal
,btn
yspan
. Dale un nombre para cada uno.// 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
spansm
será diferente aspanmd
y harán acciones diferentes. No tuviese sentido si, enspansm
teniendo en elonclick
que se abramodalsm
, se abramodalmd
.