当使用"打开"按钮打开我的对话框时，您可以看到内容并没有缩小.
然而，当用"Open modal"按钮打开它时，内容正在收缩.我如何才能防止这种情况发生？我不想要一个解决方案，我需要添加white-space: nowrap;或其他属性到对话框内的每一个单独的东西，我正在寻找一个通用的解决方案，将使模式对话框的行为像非模式的一个.
PS:我正在做我做的事情，因为我正在为对话元素做一个后备.因此，我不能只使用对话框元素，理想情况下，我不想添加额外的标记.
const dialog = document.getElementById("dialog");
document.getElementById("open").addEventListener("click", () => {
dialog.classList.add("open");
});
document.getElementById("openModal").addEventListener("click", () => {
dialog.classList.add("open", "modal");
});
document.getElementById("close").addEventListener("click", () => {
dialog.classList.remove("open", "modal");
});.dialog {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: salmon;
padding: 1rem;
}
.dialog.modal {
border-width: max(100vh, 100vw);
border-style: solid;
border-color: rgba(0, 0, 0, 0.3);
background-clip: padding-box;
backdrop-filter: blur(2px);
}
.dialog.open {
display: block;
}<div class="dialog" id="dialog">
<p>This is my dialog box</p>
<button id="close">Close</button>
</div>
<button id="open">Open</button>
<button id="openModal">Open Modal</button>