I have created a dialog box that is aligned to the middle of the screen using a combination of position:fixed
, overflow:auto
and display:table
, as follows:
.dialog {
position: fixed;
left: 0; right: 0;
top: 0; bottom: 0;
z-index: 1000000;
background-color: rgba(193, 208, 145, 0.75);
text-align: center;
overflow: auto;
}
.dialog > div {
display: table;
width: 100%;
height: 100%;
}
.dialog > div > div {
display: table-cell;
vertical-align: middle;
}
.dialog > div > div > div {
display: inline-block;
text-align: left;
min-width: 300px;
max-width: 640px;
border: 1px solid #004000;
background-color: #e2ffcd;
border-radius: 6px;
}
This works to good effect, however a problem is encountered when the contents of the dialog box are larger than the screen - this happens fairly often on mobile devices, but it can also happen on desktop in certain cases depending on contents.
When this happens, scrolling becomes awkward. On desktop, the user sees two scrollbars, and using the mousewheel will scroll the page behind the dialog box if the dialog itself has reached the end. On mobile, it seems to take some serious persuasion for the touchscreen to understand that the user wants to scroll the dialog, not the entire page. Testing on my 3DS Browser was the worst as the circle-pad would scroll the entire page, not the dialog.
How might I go about improving this situation? Ideally I'd want the page's contents to be locked in place while the dialog itself sort of "becomes" the main page for the purposes of scrolling. Note that the dialog is created by JavaScript, so JS-based solutions to this problem are acceptable.