Estoy creando dos modales. Uno para comprar y otro para vender. Sin embargo, cuando hago clic en el lapso en el modal que se supone que lo cierra, el modal no se cierra. Aquí está el código:
var buyModal = document.getElementById("buyModal"); var sellModal = document.getElementById("sellModal"); function buy() { buyModal.style.display = "block"; } function sell() { sellModal.style.display = "block"; } function close() { buyModal.style.display = "none"; sellModal.style.display = "none"; } <button id="buyButton" onclick="buy()">Buy a Currency Pair</button> <button id="sellButton" onclick="sell()">Sell a Currency Pair</button> <div id="buyModal" class="modal"> <div class="modal-content"> <button class="close" onclick="close()">×</button> <p>Buy</p> </div> </div> <div id="sellModal" class="modal"> <div class="modal-content"> <button class="close" onclick="close()">×</button> <p>Sell</p> </div> </div> </div>¿Alguien sabe por qué no funciona?
Cerrar es una palabra de JavaScript reservada y el navegador se niega a llamarla en un evento.
Debe elegir un nuevo nombre (por ejemplo closeDiv ):
var buyModal = document.getElementById("buyModal"); var sellModal = document.getElementById("sellModal"); function buy() { buyModal.style.display = "block"; } function sell() { sellModal.style.display = "block"; } function closeDiv() { buyModal.style.display = "none"; sellModal.style.display = "none"; } <button id="buyButton" onclick="buy()">Buy a Currency Pair</button> <button id="sellButton" onclick="sell()">Sell a Currency Pair</button> <div id="buyModal" class="modal"> <div class="modal-content"> <button class="close" onclick="closeDiv()">×</button> <p>Buy</p> </div> </div> <div id="sellModal" class="modal"> <div class="modal-content"> <button class="close" onclick="closeDiv()">×</button> <p>Sell</p> </div> </div>