网站开发中的Modal问题
最近在开发的网站基本上全是使用弹出的对话框（Modal）来进行 UI 交互的，所以对于 Modal 的处理也算积攒了一点经验。便想写下来供自己以后参考和学习。说实话，在目前响应式布局的主流开发方式下，Modal 非常不适合作为一个良好的交互方式。因为对于手机触屏用户非常不友好。当然，我开发的这个网站也没有考虑手机用户。当前的主流方式还是采用 SPA，JS 软路由切换页面来交互才是正解。
# Modal 元素的位置
弹出对话框的方式基本是把对话框的z-index设置的比当前页面元素高，然后使用opacity: 0.5来半透明进行遮罩。但是，需要使用 Modal 的内容最好放在 body 的下层，而不是嵌套了好多层的某个 div 里面，因为子元素的z-index是不可能大于父元素的，会导致在某些情况下，其他元素比当前的 Modalz-index更高。
# Modal 滚动条问题
很多情况下，弹出的 Modal 内容过多导致会产生滚动条。这时如果不处理好会导致出现双重滚动条。一条是页面本身的内容过多产生的滚动条，还有一条是 Modal 自身的。双重滚动条还有一个问题是当你在 Modal 里面进行滚动的时候，页面内容本身也会被滚动，这会导致关闭 Modal 的时候发现页面的位置已不是打开的位置了，用户体验非常不好。这时候有两种解决方案。
第一个方案是页面本身采用position:fixed进行固定，并用 JS 记住滚动位置，但必须保持页面本身和 Modal 是并列关系。例：
<body>
<div class="content"></div>
<div class="modal"></div>
</body>
2
3
4
这样，Modal 采用position:absolute定位，当内容过长就会自动出现滚动条。但是当关闭 Modal 的时候，必须把网页内容的position:fixed属性去除，并用 JS 滚动到当初打开 Modal 的位置。如果 Modal 是透明的，那就必须在打开 Modal 的时候设置网页内容的top和left属性来保持位置不变。
第二个方案是，网页内容采用overflow: hidden来隐藏滚动条。Modal 采用position：fixed方案进行定位，但是这时候 Modal 不得不设置overflow： auto来进行滚动。
第二个方案对于网页内容和 Modal 的位置并没有特殊的要求，比较灵活，而且不需要 JS 的介入。
# 浏览器重绘
在一个方案中，由于网页内容被设置成了position:fixed，滚动条自然消失。所以滚动位置回到了浏览器的最上面才对。但是有时候遇到打开Modal的时候发现 Modal 打开之后滚动条不在最上方，这时候的原因是因为我们虽然设置了 CSS 进行了变更，但是浏览器没有进行重新绘制，我们可以使用会导致浏览器重绘的 JS API 来让浏览器更新滚动条信息，使得打开的 Modal 处于浏览器的最上方。
参考：