Create css modal from scratch - html

Question

I am trying to make a modal from scratch without using bootstrap or similar libraries. Here is my css:
.modal-background {
position: fixed;
z-index: 2147483645;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.2);
}
.modal-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.modal-container .card {
z-index: 2147483646;
}
<div class="modal-background"></div>
<div class="modal-container">
<div class="card shadow">
<div class="card-body">
content goes here
</div>
</div>
</div>
The modal works perfectly when it is being overlayed on a web page which doesn't extend past 100% of the viewport. In other words if the page is short enough to not require scrolling then the modal displays in the center of the screen correctly.
What I am trying to figure out is how to always have the modal displayed in the center of the screen even when overlayed on a page that is long, ie: the user has scrolled down to the bottom of a page and then the modal is displayed.
Currently if the user has already scrolled to the bottom of a long page and then I display the modal, it is displayed at the top of the page out of sight from the user. How do I display it in the center of the screen so the user sees it no matter how long the page is?
ps. I am using Vue.js to show/hide the modal. So all I'm asking about is the presentation/layout of the modal.

Answer 1

Create a modal-wrapper and position it relative and make it fixed.
I've used lorem ipsum for demo purposes.
.modal-wrapper {
position: relative;
position: fixed;
z-index: 2147483645;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.modal-background {
position: fixed;
z-index: 2147483645;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.2);
}
.modal-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.modal-container .card {
z-index: 2147483646;
}
.card-body{
background: red;
}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam in vero voluptatem asperiores odio dolores! Libero voluptatem, maxime optio neque voluptate consectetur? Natus reprehenderit nemo repellat autem debitis iure aperiam? Repudiandae itaque
aliquam assumenda ab odio fuga. Voluptatem saepe incidunt ut, nihil libero aperiam. Facere aut ut laborum similique, sapiente veniam consequatur ab nostrum labore facilis, dolore ipsa debitis dignissimos. Natus dicta repellat totam laborum sit perspiciatis
culpa cupiditate, quis, amet modi, sequi architecto reiciendis. Eos inventore incidunt dolorem suscipit magni corrupti ad, sunt similique facere consequatur nesciunt accusantium deleniti! Aspernatur asperiores omnis sint vero, id natus maiores iusto facilis
itaque eaque inventore veritatis consectetur ut recusandae voluptatibus quasi ipsam voluptatem incidunt odit! Nesciunt qui corrupti iure asperiores. Autem, cum! Distinctio hic optio id obcaecati dignissimos. Dicta, consectetur at! Voluptatibus mollitia
est, in voluptatum laudantium cumque libero qui totam cupiditate! Ullam quaerat nemo culpa? Aspernatur id officia nihil omnis eligendi. Blanditiis incidunt non dolorem officia sint maiores excepturi exercitationem laudantium accusamus voluptate praesentium
inventore molestiae, quam corporis doloribus? Animi exercitationem ab quod consectetur repellendus quas et maiores voluptate eligendi eveniet? Velit libero molestias iusto tempore nesciunt tenetur quod amet quibusdam, nostrum ex sed doloribus natus soluta
accusantium quos quis possimus, ratione nam perspiciatis rem dolorum id exercitationem sint. Rem, nam. Maxime laboriosam quidem itaque quasi facere molestias cum cumque, mollitia veniam blanditiis voluptatibus, at nisi eaque sunt. Magnam id repellendus,
in praesentium vero doloribus odit, voluptas ipsa dolore ullam magni! Quis quaerat rerum laboriosam quidem vel repellendus nobis minima iusto. Aspernatur mollitia consequuntur, sed sequi aut quis, eveniet facere eaque cumque accusantium iusto, sint tempora
fuga temporibus nisi officia saepe. Nam impedit ipsum sint qui magnam omnis recusandae consectetur fuga accusamus tempore odio, quia delectus iure explicabo harum libero, numquam corporis sunt cum eveniet ut soluta! Temporibus illum amet commodi? Quos
repudiandae culpa, iusto blanditiis possimus aperiam minima non ex voluptas debitis. Corrupti asperiores aut magnam nihil ab velit, repellat tenetur iusto facilis ipsa quod nemo soluta sequi autem! Error? Atque repellendus dolores inventore sint deserunt,
totam amet at commodi autem ex laborum velit harum temporibus. Expedita impedit repellat, minima non excepturi iusto deleniti laudantium enim libero est, sed sequi? Esse quibusdam, recusandae, molestias dignissimos reiciendis officiis ea voluptatibus
aliquam fuga voluptates illum cumque enim aliquid rerum vel sunt quia. Atque laborum fugit animi quae error. Adipisci ut illo incidunt! Esse quos ab, nemo quas corporis odit quam optio aperiam dicta, dolore libero repudiandae, consectetur ut. Quas nesciunt
dolores nemo numquam maxime minus non at vel accusantium suscipit, omnis doloribus? Aperiam necessitatibus labore rerum dolor blanditiis neque vitae in, animi iure fuga facere sequi soluta consectetur possimus molestias atque aspernatur! Corrupti aspernatur
eos vero quisquam. Beatae quas natus aliquam quaerat. Libero eveniet praesentium commodi quae voluptas, sit illo eius dolorum laboriosam perferendis sunt veniam autem quas minus vitae, omnis culpa dolores facilis, iusto repellat. Iusto in asperiores omnis
atque ea! Sapiente animi porro, exercitationem earum quod et beatae aliquid ad aliquam? Ratione necessitatibus neque perferendis, ipsum delectus adipisci. Natus facere laudantium cupiditate! Maiores voluptas eveniet, aut vel saepe cupiditate mollitia.
Similique nemo adipisci voluptates, unde, magnam a nobis tenetur doloribus accusamus quod quibusdam atque ratione. Aperiam, cum aliquid minus autem dicta, quibusdam aut in labore placeat officiis modi. Beatae, error! Blanditiis illum ut odit laudantium
tempore perferendis doloremque quod vel iste atque reprehenderit veritatis labore dolore ex, temporibus eum animi debitis velit ad minima odio repellendus quaerat. Illum, totam autem. Dolor alias magnam fugiat corrupti, dolorem praesentium iste distinctio
quibusdam eligendi quae debitis minima, consequatur blanditiis molestias impedit quisquam omnis! Voluptas dolor soluta quam beatae hic adipisci sed natus minima. Nam quam perferendis in laborum quos. Tempora, aliquam ipsam dolor sunt dolores illo magni
labore voluptate architecto veritatis et deleniti optio molestias at a nisi atque nostrum nesciunt dignissimos vitae! Ullam excepturi minima esse, et aspernatur, quam dolor debitis quidem voluptatibus officia asperiores deleniti animi, assumenda dolorem
beatae dicta! Expedita eius quidem fugiat officia voluptate illo alias dolorem, eveniet dolores? Corrupti excepturi, asperiores eveniet sunt libero omnis deleniti veniam quae magni accusantium! Dicta maxime deleniti voluptatibus possimus doloribus. Exercitationem
modi magni veritatis adipisci perspiciatis assumenda numquam velit, repudiandae deleniti nihil! Possimus, veniam rem eligendi minus voluptate voluptatem expedita similique consequuntur, illum voluptatibus fugit ipsa cum sit qui mollitia accusamus. Repudiandae
sunt sed error consequuntur sint unde assumenda, dignissimos maxime minima? Porro vel unde ab reiciendis illum corporis, repudiandae delectus, odit debitis, libero voluptates error mollitia nesciunt nobis esse quod magnam cupiditate? Dignissimos consequuntur
quisquam similique! Iusto dolorum aut ipsam dignissimos? Eaque pariatur, dolores voluptatibus, aliquam sit ratione voluptatem aspernatur eum eos, quidem animi nesciunt numquam saepe nisi corrupti asperiores esse laborum molestiae deleniti natus cumque?
Nihil accusantium odit quas! Ut. Repellat maiores possimus, suscipit sunt in omnis ipsam quaerat odit velit veniam! Quae nisi, molestias similique voluptas dignissimos dolor minima corporis nihil eaque tenetur tempore nostrum vitae voluptates, temporibus
saepe? Magni voluptas ratione obcaecati nulla architecto dolor consequuntur? Corrupti quis voluptates vitae molestiae, libero nihil voluptas labore blanditiis eaque possimus vel at cupiditate recusandae ipsam iste amet sit laborum vero. Assumenda eveniet
distinctio nemo harum. Iste neque tempore nulla vel eum. Ipsum officiis facilis nostrum quia reprehenderit vel velit eum dignissimos nulla, accusamus aperiam eius praesentium eveniet et ex saepe. Dicta aut sapiente excepturi non totam nemo quod incidunt
minus aliquid fuga eligendi illum quaerat, ut, quos, ea quis voluptate blanditiis doloremque. Officiis nam magnam repellendus minima atque ab harum! Dignissimos neque dolore harum. Illo sed ut eos expedita cupiditate sequi, rem deleniti repellat distinctio
ipsam quasi mollitia neque delectus voluptas similique, culpa quia ratione doloribus adipisci autem eligendi perspiciatis? Hic vel consequatur nulla iure, molestias pariatur doloremque! In sed porro itaque eum cupiditate illum reprehenderit nihil totam
praesentium architecto dicta assumenda, enim ea, amet ab asperiores a delectus iusto? Amet doloremque commodi provident consectetur ex voluptas molestias accusamus ea tempore quidem. Nisi ab earum cumque odio, mollitia consectetur pariatur perspiciatis
maiores officiis sunt? Obcaecati placeat distinctio soluta quod earum. Saepe est, earum suscipit vel voluptatibus aspernatur, cum veniam eveniet eos et ad sed consequatur dignissimos architecto recusandae illum unde, animi repudiandae? Esse repellat in
aspernatur dolorem tempore optio ea. Animi, maxime! Deleniti esse accusamus accusantium a ipsa, ab inventore magni, unde quaerat doloribus aspernatur beatae dolorem. Excepturi molestiae ratione iusto ullam ex aspernatur eligendi, fugiat vel, similique,
accusamus quos. Exercitationem assumenda error consequuntur dolor corporis ex maiores veniam provident labore veritatis praesentium ab enim saepe expedita quas delectus similique minus sunt odio vero ducimus esse, possimus aperiam distinctio. Doloribus.
Officiis totam ducimus laudantium itaque earum sit ipsum velit laborum dolorem dicta, praesentium, excepturi, harum ab id omnis iste eaque eum sapiente distinctio. Tempora nulla, itaque ut perspiciatis blanditiis exercitationem! Quas molestias sit officiis
veniam molestiae aliquam incidunt omnis asperiores voluptatem aliquid. Aperiam iusto repellendus ipsam, quam sunt dicta libero aspernatur et suscipit omnis, enim, nostrum quibusdam praesentium rem asperiores. Illo nobis odio ex officia possimus, quidem
nisi rerum, incidunt eveniet ad inventore ipsam alias nostrum amet eaque cupiditate ullam autem fuga a sequi architecto impedit! Hic a exercitationem quidem? Aliquid quas aliquam dignissimos optio vero, libero quia deserunt, velit maiores dolores voluptate
illo nihil? Similique sequi fugit sapiente consectetur reprehenderit impedit maiores placeat qui! Impedit quae distinctio suscipit minus! Quam, consectetur culpa perferendis, tempore commodi voluptate ab vitae porro, impedit labore fugiat? Aliquam asperiores
quaerat magni nemo, corrupti esse illo sit perferendis optio quae, expedita molestias, nam explicabo voluptatum. Error, hic. Pariatur repellendus eligendi consequuntur qui consequatur harum maiores iusto voluptate dolor numquam. Voluptas odio corporis
incidunt eveniet beatae cumque doloremque molestiae, vitae at blanditiis, expedita, sunt delectus inventore! Dolorum fugiat similique, nihil quaerat recusandae eius ut ad unde. Repellendus aut eos id a delectus commodi vero enim quidem amet nam, exercitationem
veritatis provident saepe quos autem et nemo! Quo itaque a quasi doloremque! Id, numquam necessitatibus nulla totam, nostrum consequuntur ab voluptatum dignissimos recusandae, voluptatibus laudantium unde repudiandae eius? Excepturi possimus, velit autem
pariatur consequatur consequuntur? Dolores, voluptates? Ratione aspernatur tenetur accusantium obcaecati quo exercitationem asperiores officiis architecto iste cum porro fugit incidunt repellat in molestiae eum vel tempore reiciendis harum dignissimos
voluptatum voluptates, id mollitia. Vitae, aliquid! Culpa pariatur eaque, consequatur aspernatur iure blanditiis id, cumque a maxime consequuntur minima quia repudiandae tenetur aliquid minus excepturi atque nemo facere aperiam cupiditate! Pariatur dolor
omnis commodi ratione reprehenderit. Cupiditate fuga vero accusamus ullam placeat dignissimos animi excepturi dolor est et alias repellat soluta quae totam nam sapiente accusantium, repudiandae, ipsam nobis impedit! Amet rerum esse ea libero atque! Adipisci
eos atque a dicta, sapiente nesciunt, deserunt voluptate possimus dolor placeat culpa, fugiat quasi reiciendis ut dolorem beatae! Doloribus consectetur, sit sed veniam quas eaque praesentium explicabo nihil ad! Vel quia reiciendis deleniti autem. Quidem
sit inventore, asperiores recusandae nesciunt enim, magni perspiciatis molestiae aliquid, pariatur explicabo praesentium. Voluptatum illo amet quidem tenetur, soluta consequuntur labore fugit culpa in. Itaque reprehenderit illum facere dignissimos natus
voluptates aperiam ut doloremque aliquam eos id aspernatur numquam illo necessitatibus vitae, veniam pariatur. Eum ipsam dolorem id totam nulla rem nesciunt qui iste!
<div class="modal-wrapper">
<div class="modal-background"></div>
<div class="modal-container">
<div class="card shadow">
<div class="card-body">
content goes here
</div>
</div>
</div>
</div>

Answer 2

One suggestion is use the grid css and a parent to contain it
.modal-background {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
.modal-parent {
display: grid;
place-items: center;
}
.modal-container {
background-color: lime;
display: grid;
place-items: center;
padding: 1rem;
}
.modal-container .card {
z-index: 2;
padding: 2rem;
background-color: cyan;
}
<div class="modal-background"></div>
<div class="modal-parent">
<div class="modal-container">
<div class="card shadow">
<div class="card-body">
content goes here
</div>
</div>
</div>
</div>

Answer 3

I'd suggest using position: fixed which positions the element with reference to the viewport, along with the CSS logical property inset which controls the distance of each boundary from the viewport:
// irrelevant to your use-case, but shows the modal hiding and appearing:
const toggleView = (e) => {
let buttons = document.querySelectorAll('button.toggle'),
modals = document.querySelectorAll('.modal-background, .modal-container'),
currentlyOpen = !modals[0].hidden === false;
buttons.forEach(
(button) => button.classList.toggle('modalOpened', currentlyOpen)
);
modals.forEach(
(modal) => modal.hidden = !currentlyOpen
);
}
document.querySelectorAll('button.toggle').forEach(
(button) => button.addEventListener('click', toggleView)
);
.modal-background {
position: fixed;
inset: 0;
z-index: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.2);
}
.modal-container {
position: fixed;
inset: 1em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(30, 30, 30, 0.5);
}
.modal-container .card {
z-index: 100;
}
[hidden] {
display: none;
opacity: 0;
}
button.toggle {
display: block;
margin: 50vh 0 0 0;
}
button.toggle::before {
content: 'Show';
}
button.toggle.modalOpened::before {
content: 'Hide';
}
<div class="modal-background" hidden></div>
<div class="modal-container" hidden>
<div class="card shadow">
<div class="card-body">
content goes here
<button class="toggle"> the modal</button>
</div>
</div>
</div>
<!-- to illustrate that the modal can be opened, and viewed, from
anywhere in the document while still being centered on the
viewport -->
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>
<button class="toggle"> the modal</button>