【原創】自寫彈窗套電,以備後複用和完善

 

<div id="telephone">
    <div class="main">
        <i class="close"></i>
        <h2>立刻與專業老師免費通話</h2>
        <div class="form">
            <form method="post" action="http://www.ysedu.com/formnverify/nextyuyue">
                <input type="hidden" name="name" value="新作彈窗">
                <input type="hidden" name="content" value="老師">
                <input type="text" name="address" id="telephone_class" placeholder="請選擇課程" value="" readonly>
                <div class="select-list">
                    <i class="arrow"></i>
                    <ul class="list">
                    </ul>
                </div>
                <input type="text" name="tel" placeholder="請輸入手機號" required="" maxlength="11" pattern="^(1[3-9]\d{9})$">
                <input type="submit" value="點擊免費通話">
            </form>
        </div>
        <p>
            老師會盡快與您聯繫,請保證電話真實暢通~
        </p>
    </div>
    <div class="mask"></div>
</div>
<style>
    :hover{
        transition-duration: 150ms;
        transition-property: background, color, border;
        transition-timing-function: linear;
    }
    #telephone{
        display: none;
        -webkit-font-smoothing: antialiased;
    }
    #telephone .close{
        position: absolute;
        top: 15px;
        right: 15px;
        display: block;
        width: 15px;
        height: 15px;
        background: url(/beijing/img/ysedu_icon_close.png) no-repeat center;
        -webkit-background-size: 100%;
        background-size: 100%;
        color: #8c8c8c;
        text-align: center;
        cursor: pointer;
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        -ms-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
    }
    #telephone .close:hover{
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    #telephone .main{
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 10000;
        width: 400px;
        min-height: 200px;
        margin-left: -200px;
        padding: 40px 50px;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
    #telephone h2{
        margin: 0;
        padding: 0;
        font-size: 18px;
        text-align: center;
    }
    #telephone .form{
        position: relative;
        margin-top: 10px;
    }
    #telephone input,
    #telephone select{
        width: 100%;
        height: 40px;
        padding: 0 10px;
        margin-top: 20px;
        background-color: #fff;
        font-size: 12px;
        color: #262626;
        border: solid 1px #d9d9da;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
    }
    #telephone input[type=text]:focus,
    #telephone select:focus{
        outline: none;
        border-color: #1184e1;
        box-shadow: 0 0 2px 0 #9ecaed;
    }
    #telephone input[type=submit]{
        margin-top: 20px;
        border-color: #1184e1;
        background-color: #1184e1;
        font-size: 14px;
        color: #fff;
    }
    #telephone input[type=submit]:hover{
        background-color: #1a8fee;
    }
    #telephone input[type=submit]:active{
        background-color: #0f77ca;
    }
    #telephone p{
        margin-top: 15px;
        font-size: 12px;
        color: #595959;
        text-align: center;
    }
    #telephone .mask{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #000;
        opacity: .5;
        z-index: 9999;
    }
    #telephone .select-list{
        position: absolute;
        display: none;
        min-width: 298px;
        margin-top: 10px;
        z-index: 20;
        top: 64px;
        left: 0;
        border: 1px solid #e4e7ed;
        -moz-border-radius: 4px;
        border-radius: 4px;
        background-color: #fff;
        -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        -moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    }
    #telephone .arrow{
        position: absolute;
        top: -7px;
        left: 22px;
        display: inline-block;
        width: 0;
        height: 0;
        border-right: solid 6px transparent;
        border-bottom: solid 6px #ebeef5;
        border-left: solid 6px transparent;
    }
    #telephone .arrow:after{
        width: 0;
        height: 0;
        position: absolute;
        top: 1px;
        left: -6px;
        display: block;
        content: ' ';
        border-right: solid 6px transparent;
        border-bottom: solid 6px #fff;
        border-left: solid 6px transparent;
    }
    #telephone .list{
        max-height: 247px;
        padding: 6px 0;
        overflow-x: hidden;
        overflow-y: auto;
    }
    #telephone .list li{
        height: 32px;
        line-height: 32px;
        padding: 0 13px;
        color: #595959;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
    }
    #telephone .list li:hover{
        color: #606266;
        background-color: #f5f7fa;
    }
    #telephone .list li.active{
        font-weight: 700;
        color: #1184e1;
        background-color: #f1f8ff;
    }
</style>
<script>
    $(document).ready(function(){
        $("#telephone .main").css('marginTop','-' + $("#telephone .main").outerHeight()/2 + 'px'); // 設置彈窗上下居中
        $("#telephone .close").click(function(){
            $(this).parent().parent().hide(); // 關閉彈窗
        });
        // 綁定事件
        $("#telephone .list").on('click',"li",function(){
            $(this).addClass('active').siblings().removeClass('active'); // 設置下拉框點擊狀態
            $("#telephone_class").val($(this).text()); // 獲取下拉框內容並賦值給input文本框
            $("#telephone .select-list").slideToggle(); // 收起下拉框
        });
        $("#telephone_class").click(function(){
            $("#telephone .select-list").slideToggle(); // 文本input觸發切換下拉框狀態
        });
    });

    function free_tel( td_num, type_num){
        var data = [
            // 預定試聽課程
            [
                '筆試直播課程',
                '筆試面授課程',
                '面試直播課程',
                '面試面授課程',
                '教師招聘課程'
            ],
            // 筆試高效課程
            [
                '零基礎協議班',
                '金牌協議班',
                '直播速成班',
                '全程協議班',
                '尊貴私塾班'
            ],
            // 考前飆分試卷
            [
                '歷年模考試卷',
                '考前答題模板'
            ],
            // 面試提分教案
            [
                '免費領取面試小寶典',
                '面試電子資料領取'
            ]
        ];
        var title = [
            '預定試聽課程',
            '筆試高效課程',
            '考前飆分試卷',
            '面試提分教案'
        ]
        var btn_name = [
            '當即預定',
            '當即試聽',
            '當即領取',
            '當即領取'
        ]
        var cue_name = [
            '請選擇課程',
            '請選擇課程',
            '請選擇試卷',
            '請選擇電子資料'
        ]
        // type_num 爲1時只有電話 爲2時包含課程
        if(1 == type_num){
            $("#telephone_class").hide();
            $("#telephone .main").css('marginTop','-127.5px'); // 設置彈窗上下居中
            $("#telephone h2").text('立刻與專業老師免費通話'); // 恢復默認標題
            $("#telephone input[name=content]").val('老師'); // 標記備註爲老師諮詢
            $("#telephone input[type=submit]").val('點擊免費通話'); // 恢復默認按鈕名稱
        }else{
            $("#telephone_class").show();
            $("#telephone .main").css('marginTop','-157.5px'); // 設置彈窗上下居中
            $("#telephone h2").text(title[td_num]); // 設置新彈窗標題內容
            $("#telephone input[name=content]").val('課程');  // 設置後臺備註名稱
            $("#telephone input[type=submit]").val(btn_name[td_num]); // 設置新彈窗按鈕名稱
            $("#telephone_class").val('').attr('placeholder',cue_name[td_num]);  // 設置未選課前提示內容
        }
        $("#telephone .select-list").hide(); // 打開新彈窗時,恢復下拉框隱藏狀態
        $("#telephone .list").html('');
        for(let i = 0;i < data[td_num].length; i++){ // 循環輸出預設置選項目內容
            $("<li>").html(data[td_num][i]).appendTo($("#telephone .list")); // 設置新彈窗下拉框內容
        }
        $("#telephone").fadeIn(); // 顯示彈窗
    }
</script>
相關文章
相關標籤/搜索