模态变暗背景答案

【问题标题】：Modal darken background模态变暗背景
【发布时间】：2018-08-21 12:23:44
【问题描述】：

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

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

当您单击页面以外的任何位置时，我还尝试关闭模式，但只能使用关闭按钮使其工作，任何人都可以帮助我了解如何让以下两件事在此模式上工作。

// 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
}

<a href="#" class="button" modal=".modal-1">modal-1</a>
<a href="#" class="button" modal=".modal-2">modal-2</a>

<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>

【问题讨论】：

在modal打开的时候用同样的原理给一个div添加一个类

标签： javascript html css simplemodal

【解决方案1】：

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

有用的参考：HTML DOM classList Property

更新了 sn-p -

// 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>

【讨论】：