Html CSS-在移动浏览器中不可滚动

我创建了一个灯箱，里面有一个对话框。灯箱有一个固定的位置。此外，为了降低灯箱的高度，我将网页的溢出隐藏在后面。如果嵌套对话框的高度变大，我需要对话框的垂直滚动条。它在桌面浏览器中运行良好，但在移动设备上，我没有用于对话框的垂直滚动条，其内容不可滚动，为什么

HTML

---

试试iScroll Js，它既适用于桌面设备，也适用于移动设备，如果不支持浏览器，则默认滚动条工作。演示->这还允许您对移动设备使用触摸和滚动，以及您使用的lightbox插件/Jquery？这里是演示链接

<div class="lightbox">
<div class="dialog"><h4>Headline</h4>

    <p>
        ...</p>
</div>

 <h2> Website content</h2>
 <p>...</p>

body{
background: red;
padding: 20px;
overflow: hidden;
}

.lightbox{
background: rgba(255,255,255, 0.7);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.dialog{
 width: 300px;
background: lightgrey;
padding: 20px;
margin: 50px auto;
color: white;
border: 1px solid black;
overflow: auto;
max-height: 100%;
 }