Question

我创建了一个滑动模态，当模态滑出时，我不知道如何淡化和变暗背景。

如果您点击网站http://maximizemedia.co.uk上的一个项目卡，则可以看到模态的实时预览

当您单击页面以外的任何地方时，我也试图关闭模式，但是只能使它与关闭按钮一起使用，任何人都可以帮助我解决如何在此模式下进行以下两件事。

$('#modalSelector').on('shown.bs.modal', function (e) {
  $('html').css("overflow-y", "");
})

$('#modalSelector').on('hidden.bs.modal', function (e) {
  $('html').css("overflow-y", "scroll");
})

// Function to close all side-modals
function side_modals_close() {
  document.querySelectorAll('.side-modal').forEach(function(modal) {
    modal.style.right = "-600px";
  });
}

// Function to show one side-modal
function side_modal_open(name) {
  var modal = document.querySelector(name);
  modal.style.right = "0%";
}

// Open buttons
document.querySelectorAll('a.button').forEach(function(button) {
  button.addEventListener("click", function(elm) {
    side_modals_close();
    side_modal_open(button.getAttribute("modal"));
  });
});

// Close buttons
document.querySelectorAll('div.close').forEach(function(close) {
  close.addEventListener("click", function() {
    side_modals_close();
  });
});

.button {
  text-decoration: none;
  color: #000;
  margin-right: 15px;
}

.side-modal {
  width: 35%;
  width: 300px padding: 40px;
  position: fixed;
  height: 100%;
  overflow-y: scroll;
  background-color: #fff;
  top: 0;
  right: -550px;
  bottom: 0;
  align-items: center;
  justify-content: center;
  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  display: block;
  transition: all 1s ease;
}

.modal-content {
  padding: 20px;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  transform: rotate(45deg);
  font-size: 20px
}

Answer 1

添加div或遍布整个容器的任何容器。在您的js side_modal_open和side_modals_close函数中，您可以添加/删除提供背景颜色的类。

有用的参考：HTML DOM classList Property

更新的代码段-

// Function to close all side-modals
function side_modals_close() {
  document.querySelectorAll('.side-modal').forEach(function(modal) {
    modal.style.right = "-600px";
  });
  document.getElementById("overlay").classList.remove("darkscale");
}

// Function to show one side-modal
function side_modal_open(name) {
  var modal = document.querySelector(name);
  modal.style.right = "0%";
  document.getElementById("overlay").classList.add("darkscale");
}

// Open buttons
document.querySelectorAll('a.button').forEach(function(button) {
  button.addEventListener("click", function(elm) {
    side_modals_close();
    side_modal_open(button.getAttribute("modal"));
  });
});

// Close buttons
document.querySelectorAll('div.close').forEach(function(close) {
  close.addEventListener("click", function() {
    side_modals_close();
  });
});

* {
  margin: 0;
}

.button {
  text-decoration: none;
  color: #000;
  margin-right: 15px;
}

.side-modal {
  width: 35%;
  width: 300px padding: 40px;
  position: fixed;
  height: 100%;
  overflow-y: scroll;
  background-color: #fff;
  top: 0;
  right: -550px;
  bottom: 0;
  align-items: center;
  justify-content: center;
  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  display: block;
  transition: all 1s ease;
}

.modal-content {
  padding: 20px;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  transform: rotate(45deg);
  font-size: 20px
}

.darkscale {
  background-color: rgba(0, 0, 0, 0.1);
  height: 100vh;
}

<body>
  <div id="overlay">
    <a href="#" class="button" modal=".modal-1">modal-1</a>
    <a href="#" class="button" modal=".modal-2">modal-2</a>
  </div>
  <div class="side-modal modal-1">
    <div class="modal-content">
      <h2>modal-1</h2>
      <div class="close close-side-modal">+</div>
    </div>
  </div>

  <div id="modal2" class="side-modal modal-2">
    <div class="modal-content">
      <h2>modal-2</h2>
      <div class="close close-side-modal">+</div>
    </div>
  </div>
</body>

模态使背景变暗

1 个答案: