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