如何做一个从正确的弹出窗口

Question

我一直在尝试创建模态弹出窗口几天，但是我找不到任何真正有效的解决方案。 我希望Modal弹出窗口像iOS的设置中的一个页面一样来自右侧，而不会阻止滚动。我指定“不阻止滚动”，因为我已经尝试使用绝对位置或固定位置的模态弹出窗口尝试过，但没有正确的高度。 对于那些看不到我想实现的目标的人来说，这是一个可以帮助您理解的图像：

的图像，

感谢所有会花时间回答我的人。 对不起，我不能给你一块代码，但我卡住了。

Answer 1

看到这个：

let btn = document.querySelector("#btn");
let aside = document.querySelector("aside");

btn.onclick = function () {
    aside.classList.toggle("active");
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    padding: 10px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0af;
}
#btn {
    width: 50px;
    height: 30px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
}
#btn span {
    background-color: black;
    border-radius: 3px;
}
.content {
    margin-top: 50px;
    padding: 20px;
}
aside {
    position: fixed;
    top: 50px;
    right: -60vw; /* - width */
    width: 60vw;
    background-color: #0df;
    height: calc(100vh - 50px);
    padding: 10px;
    transition: 1s;
}
.active {
    right: 0 !important;
}
aside ul li {
    list-style-type: none;
    padding: 10px;
    border-bottom: 1px solid #888;
}
aside ul li:hover {
    background-color: #86efff;
}

<header>
    <div class="logo">
        logo
    </div>
    <div id="btn">
        <span></span>
        <span></span>
        <span></span>
    </div>
</header>
<aside>
    <ul>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
    </ul>
</aside>
<div class="content">
    <h1>This Is content</h1>
    <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio, eaque? Blanditiis eligendi reprehenderit nihil? Deleniti iusto saepe ullam incidunt! Ipsum quibusdam soluta accusantium debitis ad voluptatum doloremque ratione, nihil amet?
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, delectus quasi repellat at omnis doloribus nisi quod aperiam consequuntur, id adipisci perspiciatis? Laudantium labore dignissimos dolore quis voluptate? Aliquid, maxime!
        <br>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates quos fugit laboriosam, dolorem soluta in et? Libero repellendus necessitatibus quo hic est voluptate odit dolore tempore quasi. Fugit, culpa sint?
    </p>
</div>