div 模拟alert弹出框

--------------信息展示弹出框----------------

<style>
    .over{background-color: rgba(0, 0, 0, 0.7);display: block;height: 100%;left: 0;position: fixed;top: 0;width: 100%;z-index: 998;}
    .alert{display: block;left: 50%;position: fixed;top: 50%;transform: translateX(-50%) translateY(-50%);width: 702px;z-index: 999;}
    .title{background-color: #f54c53;border-radius: 10px 10px 0 0;color: #fff;font-size: 34px;line-height: 110px;padding-left: 30px;}
    .close{display: block;height: 36px;position: absolute;right: 30px;top: 0;width: 80px;}
    .content{background-color: #fff;border-radius: 0 0 10px 10px;color: #747474;font-size: 22px;padding: 30px;}
    .important{color: #f54c53;}
</style>
<div class="over"></div>
<div class="alert">
    <h2 class="title">
        <span>什么是英美次卡？</span>
        <a href="javascript:;" class="close">取消</a>
    </h2>
    <div class="content">
        <p><span class="important">• 英美次卡学习套餐优势：</span>每天可以随意预约多节课，没有限制，可以一次性预约未来期间内的多节课。有效期为上课次数的1.5倍，可以随意请假</p>
        <p><span class="important">• 英美次卡学习套餐适合以下用户：</span>想体验地道的英美文化，学习原汁原味的英美发音</p>
        <p><span class="important">约课须知：</span></p>
        <p>
            1、上午10点-晚上11点均可上课，需提前30分钟预约课程。 <br>
            2、提前1小时取消预约课程。<br>
            3、一天能随意预约多次课，可以一次性预约未来的多节课.
        </p>
    </div>
</div>

---------------选择弹出框------------------

<style>
    .over{background-color: rgba(0, 0, 0, 0.7);display: none;height: 100%;left: 0;position: fixed;top: 0;width: 100%;z-index: 998;}
    .g-pop-1 {position: fixed;top: 50%;left: 50%;width: 7.02rem;z-index: 999;}
    .g-pop-1 .tit {padding-left: .3rem;line-height: 1.1rem;font-size: .34rem;background-color: #f54c53;color: #fff;border-radius: 10px 10px 0 0;}
    .g-pop-1 .txt {padding: .3rem;font-size: .22rem;color: #747474;border-radius: 0 0 10px 10px;text-align: center;}
    .pop-confirm .g-btn-2 {width: 2.8rem;}
    .g-btn-2.btn-orange {background-color: #f54c53;}
    .g-btn-2 {width: 3.4rem;height: 1rem;font-size: .32rem;line-height: 1rem;display: inline-block;border-radius: 10px;color: #fff;border: none;outline: none;text-align: center;}
    .pop-confirm .btn-gray {float: right;background-color: #d5d5d5;height: 1rem;font-size: .32rem;line-height: 1rem;}
</style>
<div class="over"></div>
<div class="g-pop-1 pop-confirm alert_confirm" style="display: block;">
    <h2 class="tit">
        <span>选择进入</span>
    </h2>
    <div class="txt">
        <a href="javascript:;" class="g-btn-2 btn-orange a-confirm select_k12_jason" value="2">标准课程</a>
        <a href="javascript:;" class="g-btn-2 btn-gray a-cancel select_k12_jason" value="1"> K12课程</a>
    </div>
</div>

 

 

转载于:https://www.cnblogs.com/isungge/p/5737189.html