<main>
<h1>Top of the page</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, tempore libero. Eum expedita quos quod dolore ut molestias harum est, minima debitis facilis similique placeat non, iste in. Consequatur, aliquam.</p>
<p>Molestias sed iure iste voluptas laborum voluptate ipsam at totam eaque, vel ab unde temporibus, non ducimus earum quo itaque fugiat cumque neque obcaecati. Temporibus doloribus distinctio quidem dignissimos placeat.</p>
<p>Minus, mollitia. Ut, nobis odit adipisci deserunt blanditiis voluptate fugiat reiciendis accusantium omnis tenetur ab molestias praesentium suscipit quod commodi numquam! Repellat iusto incidunt qui nemo non consequatur quam reiciendis!</p>
<p>Quam, neque assumenda optio aspernatur voluptas officia beatae molestiae corporis ipsum enim laboriosam hic, deleniti incidunt inventore rem recusandae perferendis exercitationem nihil ab quis maiores nemo? Quisquam qui sequi et!</p>
<p>Alias beatae, eum dicta obcaecati aliquam nobis rem omnis nulla doloribus reprehenderit quaerat corporis consectetur illum ullam et ipsam aliquid, quis pariatur totam distinctio doloremque quam molestiae iusto. Consectetur, possimus?</p>
<p>Tempora cumque provident animi consectetur, amet ducimus! Incidunt maiores nobis voluptas nostrum voluptatem sunt itaque sequi placeat, qui porro sint quisquam illo consectetur! Doloremque, nulla nobis illum eum iusto repellendus?</p>
<p>Temporibus nihil itaque eveniet, beatae repellendus distinctio. Sunt numquam odit excepturi quis, nihil aliquid architecto veritatis nam dolorum placeat ratione dolorem? Reiciendis a distinctio, ipsa assumenda neque minus mollitia consequuntur.</p>
<p>Autem incidunt nihil ipsa ipsum eum culpa placeat inventore! Dignissimos, fuga explicabo magnam dolore distinctio animi aut, culpa consectetur corporis alias quae mollitia assumenda inventore consequuntur odio cupiditate placeat sint!</p>
<p>A debitis aliquam, recusandae id amet illum alias explicabo quidem harum laborum, odio rerum quos in suscipit blanditiis aspernatur, delectus iure mollitia temporibus! Quisquam corporis cum dolorum neque voluptas dicta.</p>
<p>Consequatur ut temporibus mollitia numquam itaque aperiam veniam, perspiciatis sunt dignissimos voluptatum alias distinctio nam nemo quae porro, ipsam tenetur nisi. Aliquid adipisci voluptatem atque illum vel magnam consequatur exercitationem!</p>
<p>Deserunt sunt, quidem consequatur repellat modi officia quaerat laboriosam animi voluptates itaque vero harum officiis similique amet atque quibusdam eos et, voluptatum beatae repudiandae quia quae? In ex id laborum!</p>
<p>Nulla nam temporibus esse odit, voluptate optio exercitationem repudiandae aliquid dolores nobis, magnam ad porro sint nisi fugiat soluta tempore ab magni ipsa atque quae repellendus. Beatae provident iusto ipsum?</p>
<p>Praesentium optio deserunt perspiciatis animi magni reiciendis, assumenda molestias nostrum beatae architecto voluptatem suscipit at non quidem doloribus nobis laudantium fugit autem est, iusto nam asperiores corporis quasi excepturi. Impedit?</p>
<p>Tempore odio fuga a voluptatum quod aut, sint cum saepe nisi sapiente assumenda. Exercitationem quo nostrum vero eum et, in velit quaerat labore dolore obcaecati eius molestias libero vitae similique.</p>
<p>Natus, cum ipsum iste quis voluptas molestiae quae eius doloribus, unde iure porro doloremque quos nobis eligendi architecto, eaque hic voluptatem fuga sunt. Consequuntur optio doloremque ab commodi, laborum obcaecati?</p>
<p>Deserunt cum, facere unde, qui eius obcaecati a in excepturi illum ipsam porro iste cumque nesciunt non ipsum nulla dolorum inventore, et perspiciatis! Iste repudiandae quidem omnis ullam consectetur molestias?</p>
<p>Molestiae, deserunt illum! Quisquam aliquid nisi veniam possimus ab id ad, ipsam, sit libero exercitationem nemo corporis repudiandae dolores impedit eligendi reiciendis quidem accusantium asperiores aliquam praesentium, voluptatem odit! Dolor.</p>
<p>Ullam rem alias doloremque tempore cumque a nulla praesentium, animi quas beatae optio dicta corrupti reiciendis, velit, vero ipsa debitis repellat earum soluta doloribus. Rerum dolores quas aliquid eligendi dolore.</p>
<p>Necessitatibus eaque dicta impedit? Veritatis dicta voluptatem, dolor consequatur quo inventore laboriosam laborum eum omnis ipsum minus voluptatum modi similique saepe exercitationem ipsa, culpa itaque corrupti iusto eligendi. Ipsam, non?</p>
<p>Aut in modi voluptatem porro, natus quas laborum corporis, unde dignissimos harum deserunt velit impedit quisquam minima id nesciunt ab, assumenda dolorum voluptatibus numquam veniam ea quia! Nihil, mollitia excepturi?</p>
</main>
<aside>
<div>
<button class="show-dialog-button">Show Dialog</button>
</div>
</aside>
<dialog id="dialog">
<div class="dialog-title">
Hi, I'm a dialog.
</div>
<button aria-label="Close Dialog" class="close-dialog-button">
<svg viewBox="0 0 512 512" width="15">
<path d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-83.6 290.5c4.8 4.8 4.8 12.6 0 17.4l-40.5 40.5c-4.8 4.8-12.6 4.8-17.4 0L256 313.3l-66.5 67.1c-4.8 4.8-12.6 4.8-17.4 0l-40.5-40.5c-4.8-4.8-4.8-12.6 0-17.4l67.1-66.5-67.1-66.5c-4.8-4.8-4.8-12.6 0-17.4l40.5-40.5c4.8-4.8 12.6-4.8 17.4 0l66.5 67.1 66.5-67.1c4.8-4.8 12.6-4.8 17.4 0l40.5 40.5c4.8 4.8 4.8 12.6 0 17.4L313.3 256l67.1 66.5z" />
</svg>
</button>
</dialog>
html {
scrollbar-gutter: stable;
}
body {
max-inline-size: 80ch;
margin-inline: auto;
margin-block: 0;
padding: 1rem;
display: grid;
grid-template-columns: 1fr 20ch;
gap: 1rem;
font: 100%/1.8 system-ui;
@media (max-width: 500px) {
grid-template-columns: 1fr;
}
&:has(dialog[open]) {
overflow: hidden;
}
}
aside {
> div {
position: sticky;
top: 1rem;
}
@media (max-width: 500px) {
position: fixed;
bottom: 0;
width: 100%;
background: white;
padding: 0.5rem;
}
}
dialog {
/* position: relative; */
padding: 2rem;
text-align: center;
.close-dialog-button {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: none;
border: 0;
opacity: 0.5;
&:hover {
opacity: 1;
}
}
}
const showDialogButton = document.querySelector(".show-dialog-button");
const closeDialogButton = document.querySelector(".close-dialog-button");
const dialog = document.querySelector("dialog");
showDialogButton.addEventListener("click", () => {
dialog.showModal();
});
closeDialogButton.addEventListener("click", () => {
dialog.close();
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.