改善对话框滚动

Question

我创建了一个对话框，该对话框使用position:fixed ， overflow:auto和display:table的组合与屏幕中间对齐，如下所示：

.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;
}

演示版

这效果很好，但是当对话框的内容大于屏幕时会遇到问题-这种情况在移动设备上经常发生，但在某些情况下（取决于内容）在桌面上也可能发生。

发生这种情况时，滚动变得笨拙。 在桌面上，用户会看到两个滚动条，并且如果对话框本身已到达末尾，则使用鼠标滚轮将在对话框后面滚动页面。 在移动设备上，触摸屏似乎需要认真的说服才能理解用户要滚动对话框，而不是整个页面。 我的3DS浏览器上的测试是最糟糕的，因为圆形键盘会滚动整个页面，而不是对话框。

我该如何改善这种情况？ 理想情况下，我希望页面的内容被锁定在适当的位置，而对话框本身出于滚动目的而“变成”主页。 需要注意的是由JavaScript创建对话框，所以对这个问题的基于JS的解决方案是可以接受的。