浅议内滚动布局的概念与实现方法

合体是什么意思呢？基本上，90%+的弹框组件，半透明覆盖层overlay和弹框dialog是两个并列的兄弟关系的独立的元素，这种设计的好处在于overlay组件可以复用。实际上，我们要实现一个弹框效果，只要一层div标签就可以了，核心就是使用兼容的RGBA背景色技巧，然后弹框HTML放在里面：

.container {
    position: absolute; top: 0; left: 0; bottom: 0; width: 100%;
    background-color: rgba(0,0,0,.5);
    filter: progid:DXImageTransform.Microsoft.gradient
(startcolorstr=#7F000000,endcolorstr=#7F000000);
    overflow: auto;
}
:root .container {
    /* IE9 无 filter */
    filter: none;
}

HTML结构示意如下：

<div class="container">
    <dialog></dialog>
</div>

（编辑：淮北站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!