【原创】自写弹窗套电，以备后复用和完善

 

<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>