通过不改变体内每个元素的不透明度来显示模态

Question

我已经使用香草javascript创建了一个模式。这是我所做的：

let modal = document.createElement("div");
modal.id = "translation-loader";
modal.style.paddingRight = "15px";
modal.style.display = "block";
modal.style.overflowX = "hidden";
modal.style.overflowY = "auto";
modal.style.zIndex = "1072";
modal.style.position = "fixed";
modal.style.top = 0;
modal.style.left = 0;
modal.style.width = "100%";
modal.style.height = "100%";
modal.style.outline = 0
modal.classList.add("animated","fadeInDown")

let modalDialog = document.createElement("div");
modalDialog.style.maxWidth = "500px";
modalDialog.style.margin = "1.75rem auto";
modalDialog.style.position = "relative";
modalDialog.style.width = "auto";
modalDialog.style.transition = "transform .3s ease-out,-webkit-transform .3s ease-out";
modalDialog.style.pointerEvents = "none";
modalDialog.style.minHeight = "calc(100% - 3.5rem)";

modal.append(modalDialog);

let modalContent = document.createElement("div");
modalContent.style.position = "relative";
modalContent.style.display = "flex";
modalContent.style.flexDirection = "column";
modalContent.style.width = "100%";
modalContent.style.pointerEvents = "auto";
modalContent.style.backgroundColor = "#fff";
modalContent.style.backgroundClip = "padding-box";
modalContent.style.border = "1px solid rgba(0,0,0,.2)";
modalContent.style.borderRadius = ".3rem";
modalContent.style.outline = 0;
modalDialog.append(modalContent);

let modalHeader = document.createElement("div");
modalHeader.style.display = "flex";
modalHeader.style.alignItems = "flex-Start";
modalHeader.style.justifyContent = "space-between";
modalHeader.style.padding = "1rem 1rem";
modalHeader.style.borderBottom = "1px solid #dee2e6";
modalHeader.style.borderTopLeftRadius = "calc(.3rem - 1px)";
modalHeader.style.borderTopRightRadius = "calc(.3rem - 1px)";
const modalHeaderElement = document.createElement("h5");
modalHeaderElement.innerText = "Translation In Progress";
modalHeaderElement.style.fontSize = "1.25rem";
modalHeaderElement.style.fontWeight = "500";
modalHeaderElement.style.marginTop = 0;
modalHeaderElement.style.marginBottom = 0;
modalHeader.append(modalHeaderElement);
modalContent.append(modalHeader);


let modalBody = document.createElement("div");
modalBody.style.position = "relative";
modalBody.style.flex = "1 1 auto";
modalBody.style.padding = "1rem";
modalBody.innerText = "Body";
modalContent.append(modalBody);


let modalFooter = document.createElement("div");
modalFooter.style.display = "flex";
modalFooter.style.flexWrap = "flex-wrap";
modalFooter.style.alignItems = "center";
modalFooter.style.justifyContent = "flex-end";
modalFooter.style.padding = "0.75rem";
modalFooter.style.borderTop = "1px solid #dee2e6";
modalFooter.style.borderBottomRightRadius = "calc(.3rem - 1px)";
modalFooter.style.borderBottomLeftRadius = "calc(.3rem - 1px)";
modalFooter.innerText = "Footer"
modalContent.append(modalFooter);

document.body.append(modal);

Array.prototype.forEach.call(document.body.children, (child) => {
	if(child.id !== "translation-loader") {
  	child.style.opacity = 0.1
  }
  console.log(child.id);
});

<p>
This is a sample text..What'sup
<a href="#">click here</a>
</p>

如您所见，为了显示模式，我将除模式以外的所有其他元素的不透明度更改为0.1。我认为这是显示模态的错误方式。原因是，当模式隐藏时，我无法将所有其他元素的不透明度更改回1。这可能会更改元素的原始（默认）不透明度。

处理此问题的更好方法是什么？

Answer 1

一些建议：

1. 您正在用javascript做很多样式设计。使用类更有效。实际上，您已经在执行此操作：modal.classList.add("animated","fadeInDown")

您所有的样式都应通过添加类。删除所有modal.style，modalDialog.style和modalContent.style-只需添加类并将样式移到类

（[<style></style>块或外部样式表]

。

要显示/隐藏模态，请使用style.display = none和style.display = block。无需使用不透明度。如果要使用fadeIn / fadeOut效果，可以轻松找到许多教程。这是一个：
2. https://chrisbuttery.com/articles/fade-in-fade-out-with-javascript/

注意淡入淡出效果仅应用于最外面的divmodaldiv。 div淡入/淡出时，里面的所有内容也会消失。

这是滚动您自己的模式对话框的简单示例：

Easiest way to use div as a modal dialog

Answer 2

最好的方法是在overlay后面放置一个modal，并使用opacity使其成为background。