<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++){ // 循环输出预设置选项目内容 $("").html(data[td_num][i]).appendTo($("#telephone .list")); // 设置新弹窗下拉框内容 } $("#telephone").fadeIn(); // 显示弹窗 } script>