弹出窗

用法

示例

HTML

<!-- 确认框 -->
<div class="js_dialog" id="dialog1">
    <div class="baie-mask"></div>
    <div class="baie-dialog">
        <div class="baie-dialog__bd short">确认删除该商品？</div>
        <div class="baie-dialog__ft">
            <a href="javascript:;" class="baie-dialog__btn baie-dialog__btn_default">取消</a>
            <a href="javascript:;" class="baie-dialog__btn baie-dialog__btn_primary">确认</a>
        </div>
    </div>
</div>

<!-- 提示框 -->
<div class="js_dialog" id="dialog2">
    <div class="baie-mask"></div>
    <div class="baie-dialog">
        <div class="baie-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
        <div class="baie-dialog__ft">
            <a href="javascript:;" class="baie-dialog__btn baie-dialog__btn_default">知道了</a>
        </div>
    </div>
</div>

CSS

.baie-dialog {
    position: fixed;
    z-index: 1024;
    width: 80%;
    max-width: 5.2rem;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #fff;
    text-align: center;
    border-radius: .32rem;
    overflow: hidden;
}
.baie-dialog__hd {
    padding: .36rem .44rem .14rem;
}
.baie-dialog__title {
    font-weight: 400;
    font-size: .36rem;
}
.baie-dialog__bd {
    padding: 0 .48rem .24rem;
    min-height: .8rem;
    font-size: .30rem;
    line-height: .46rem;
    word-wrap: break-word;
    word-break: break-all;
    color: #999;
}
.baie-dialog__bd:first-child {
    padding: .44rem .40rem .44rem;
    color: #838383;
}
.baie-dialog__bd.short {
    color: #161616;
    font-size: .36rem;
}
.baie-dialog__ft {
    position: relative;
    line-height: .88rem;
    font-size: .36rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
.baie-dialog__ft:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #e4e4e4;
    color: #D5D5D6;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}
.baie-dialog__btn {
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    color: #ea5503;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    position: relative;
}
.baie-dialog__btn:active {
    background-color: #EEEEEE;
}
.baie-dialog__btn:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-left: 1px solid #D5D5D6;
    color: #D5D5D6;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}
.baie-dialog__btn:first-child:after {
    display: none;
}
.baie-dialog__btn_default {
    color: #161616;
}
.baie-dialog__btn_primary {
    color: #ea5503;
}