这个想法是让一个
<dialog><button type="button" onclick="document.querySelector('.slide-in').show()">open</button>
<dialog class="slide-in">
<form method="dialog"><button>close</button></form>
</dialog>
<style>
.slide-in {
left: auto;
right: -200px;
}
.slide-in[open] {
animation-name: slide-in;
animation-duration: .5s;
animation-iteration-count: 1;
right: 0;
}
@keyframes slide-in {
from {
right: -200px;
}
to {
right: 0;
}
}
</style>
但是由于某种原因，当对话框打开时，它保持在屏幕的右侧，而整个主体从左侧移入。
演示：https://jsbin.com/sominizona/edit?html,css,output
我认为这与顶层概念有关，但我对如何更改以使对话框移动而不是文档的整个其余部分有点不知所措。
您不需要任何初始定位样式，只需使用
translateX@keyframes slide-in {
0%{
transform: translateX(100%)
}
}
.slide-in {
margin-right: 0;
position: fixed;
inset: 0;
}
.slide-in[open] {
animation-name: slide-in;
animation-duration: .5s;
animation-iteration-count: 1;
}
@keyframes slide-in {
0%{
transform: translateX(100%)
}
}
/*@keyframes slide-in {
from {
right: -200px;
}
to {
right: 0;
}
}*/<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor, erat vel pharetra vulputate, neque justo euismod justo, vel tristique nibh sapien a felis. Sed laoreet, lorem quis gravida sollicitudin, enim est pharetra enim, ut accumsan metus lacus a quam. Morbi faucibus quam et metus sagittis malesuada. Vivamus consectetur odio sed suscipit malesuada. Duis urna quam, pharetra id eleifend in, rhoncus id nisi. Donec sit amet porta velit. Donec pellentesque purus eget libero tincidunt, sit amet aliquet purus sagittis. Quisque in leo at leo lacinia bibendum a semper ligula.</p>
<p>Click the button below. A modal dialog opens. It should slide in from the right. Instead the body slides in from the left, while the dialog stays put.</p>
<div class="container">
<button type="button" onclick="document.querySelector('.slide-in').show()">open</button>
<dialog class="slide-in">
<form class="inner" method="dialog"><button>close</button></form>
</dialog>
</div>
</body>
</html>