0
142
ViewsCómo hacer una ventana emergente que viene de la derecha
He estado tratando de crear una ventana emergente modal durante varios días, pero no puedo encontrar ninguna solución que realmente funcione. Me gustaría que la ventana emergente modal viniera desde la derecha como una página en la configuración de iOS sin bloquear el desplazamiento. Especifico "sin bloquear el scroll" porque ya probé con un popup modal en posición absoluta o fija pero no tiene la altura adecuada. Para aquellos que no ven lo que me gustaría lograr, aquí hay una imagen que podría ayudarlos a entender:
Gracias a todos los que se tomen el tiempo de responderme. Lo siento, no puedo darte un fragmento de código, pero estoy atascado.
·
Santiago Trujillo
1 answers
Answer question0
mira esto:
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>
·
Santiago Trujillo
Report
Answer question