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

Question

我使用 vanilla 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

一些建议：

您在 javascript 中做了很多样式设置。使用 classes 的效率多。事实上，你已经在这样做了：

modal.classList.add("animated","fadeInDown")

您的所有样式都应通过添加 classes 来实现。删除所有 modal.style、modalDialog.style 和 modalContent.style - 只需添加 classes 并将样式移动到 class (<style></style>块或外部样式表).

要show/hide 模态，请使用style.display = none 和style.display = block。无需使用不透明度。如果你想要淡入/淡出效果，有很多教程很容易用谷歌搜索。这是一个：

https://chrisbuttery.com/articles/fade-in-fade-out-with-javascript/

请注意，淡入淡出效果仅应用于最外面的 div、modal div。里面的所有东西也会随着 div 消失 in/out.

而消失

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

Answer 2

最好的方法是在 modal 后面制作一个 overlay 并使用 background.

制作它的 opacity

对于你的情况，你可以通过

#translation-loader {
    background: rgba(255, 255, 255, 0.8);
}

第二种方法使用 pseudo 元素

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);
});

#translation-loader {
    position: relative;
}
#translation-loader::before {
    content: '';
    background: white;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
}

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

NOTE: You can change the opacity as per requirement.

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

Showing the modal by not altering the opacity of each element in the body

html

javascript

css

modal-dialog