Back to main

Modal Dialog

Modal dialog display

Open Modal
section.modal-dialog {
position: fixed;
top: 10vw;
left: 25vw;
width: 50vw;
min-height: 10vh;
height: auto;
display: none;
z-index: 10;

section.modal-dialog:target {
display: block;

/* Styling */
section.modal-dialog {
background-color: #FFF;
padding: 2em;
box-shadow: 0.25em 0.25em 0.5em 0.25em #AAAAAA33;

a.modal-opener, a.modal-close {
text-decoration: none;

.modal-opener {
display: inline-block;
padding: 0.5em;
border-radius: 0.5em;
color: #FFF;
background-image: linear-gradient(
to top left,
font-style: italic;
background-position: 0% 50%;
background-size: 400% 400%;

.modal-opener:hover {
animation: backgroundFlow 5s ease infinite;


<a class="modal-opener" href="#modal-1">Open Modal</a>

<section class="modal-dialog" id="modal-1">
<a class="modal-close" href="#"><span aria-label="close" role="image"></span></a>
In user interface design for computer applications,
a modal window is a graphical control element subordinate to
an application's main window. It creates a mode that disables
the main window but keeps it visible, with the modal window
as a child window in front of it. Users must interact with
the modal window before they can return to the parent application.
This avoids interrupting the workflow on the main window.
Modal windows are sometimes called heavy windows or modal dialogs
because they often display a dialog box.