checked复选框下Popup和Aside浮层实现实例页面

CSS代码：

.aside,
.aside-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.aside {
    position: fixed;
    z-index: 3;
    visibility: hidden;
    overflow: hidden;
    transition: visibility .25s;
}
.aside.active {
    visibility: visible;
    transition: none;
}
.aside-overlay {
    transition: opacity .25s;
    opacity: 0;
    background-color: #000;
}
.active > .aside-overlay {
    opacity: .6
}
.aside-content,
.aside-popup {
    position: absolute;
    right: 0;
    bottom: 0;
    transition: transform .15s;
    background-color: #fff;
}
.active > .aside-content,
.active > .aside-popup {
    transform: translate(0,0);
}
.aside-content {
    top: 0;
    left: 2.5rem;
    transform: translateX(100%);
}
.aside-popup {
    left: 0;
    transform: translateY(100%);
}

HTML代码：

<label class="ui-button" data-type="primary"><input type="checkbox" id="zxxAside" hidden>点击我显示侧边栏</label>
<aside class="aside" for="zxxAside">
    <label for="zxxAside" class="aside-overlay"></label>
    <div class="aside-content">
        <p>点击黑色蒙层可以收起</p>
    </div>
</aside>

<label class="ui-button" data-type="primary"><input type="checkbox" id="zxxPopup" hidden>点击我显示底部浮层</label>
<aside class="aside" for="zxxPopup">
    <label for="zxxPopup" class="aside-overlay"></label>
    <div class="aside-popup">
        <p>点击黑色蒙层可以收起</p>
    </div>
</aside>

JS代码：

<script src="smart-for.js"></script>