时间戳

首页 > 解决方案 > 如何为所有功能制作一个关闭按钮？在js中

javascript - 如何为所有功能制作一个关闭按钮？在js中

问题描述

帮帮我，请检查我的代码

获取模态

var modal;
var overlay = document.getElementById("overlay");

获取打开模态的按钮

var btn_carapesan = document.getElementById("btn-carapesan");
var btn_ketentuan = document.getElementById("btn-ketentuan");
var btn_jaminan = document.getElementById("btn-jaminan");
var btn_harga = document.getElementById("btn-harga");

当用户点击按钮时，打开模式

btn_carapesan.onclick = function() {
  modal = document.getElementById("modal-carapesan");
  modal.style.display = "block";
  document.getElementById("overlay").style.display = "block";
}

btn_ketentuan.onclick = function() {
  // var span = document.getElementsByClassName("close")[1];
  modal = document.getElementById("modal-ketentuan");
  modal.style.display = "block";
  document.getElementById("overlay").style.display = "block";
}

btn_jaminan.onclick = function() {
  // span = document.getElementsByClassName("close")[2];
  modal = document.getElementById("modal-jaminan");
  modal.style.display = "block";
  document.getElementById("overlay").style.display = "block";
}

btn_harga.onclick = function() {
  // span = document.getElementsByClassName("close")[3];
  modal = document.getElementById("modal-harga");
  modal.style.display = "block";
  document.getElementById("overlay").style.display = "block";
}

获取关闭模态的元素

var span = document.getElementsByClassName('close')[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
  document.getElementById("overlay").style.display = "none";
}

每个模态都有一个关闭按钮，我可以在第一个模态中使用关闭模态，但不能在模态中使用

标签： javascript

解决方案

如果我正确理解了您的问题，您需要在单击关闭按钮时关闭所有模式，可以这样做：

span.onclick = function() {
    [ document.getElementById("modal-carapesan"), 
      document.getElementById("modal-ketentuan"), 
      document.getElementById("modal-jaminan"), 
      document.getElementById("modal-harga")
    ].forEach(modal => {
        modal.style.display = "none";
    });

    document.getElementById("overlay").style.display = "none";
};

推荐阅读