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