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>

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM