Question

0

29

Views

How to do a popup coming from right

I've been trying to create a modal popup for several days now but I can't find any solution that really works. I would like the modal popup to come from the right like a page in the settings on iOS without blocking the scroll. I specify "without blocking the scroll" because I already tried with a modal popup in absolute or fixed position but it doesn't have the right height. For those who don't see what I would like to achieve, here is an image that might help you understand:

Thanks to all those who will take the time to answer me. Sorry I can't give you a piece of code, but I'm stuck.

about 1 month ago ·

Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Answer 1 · 2022-06-30T13:46:55.466Z

see this:

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>