自己寫了個alert提示框。因為系統(tǒng)alert在蘋果手機微信中,提示時,頂部會顯示網(wǎng)站地址。
同時其他后續(xù)操作需要在js中繼續(xù)填寫。因此簡單用div寫了一個alert提示框,并自動關閉。
效果圖


css樣式
/*彈出消息對話框樣式*/.show_alert_box{width:100%;height:100%;position:fixed;top:0px;left:0px;background-color:rgba(0,0,0,0.6);display:none;z-index:200;}.show_alert_div{width:70%;position:absolute;top:50%;left:15%;margin-top:-80px;background-color:#fff;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #797979;overflow:hidden;box-sizing:border-box;}.show_alert_div h1{width:100%;float:left;font-size:20px;color:#353535;text-align:center;line-height:26px;margin-top:20px;}.show_alert_div h2{width:100%;float:left;font-size:16px;color:#353535;text-align:center;line-height:20px;margin:20px 0px 70px 0px;box-sizing:border-box;padding:0px 15px;}.show_alert_div h3{width:100%;float:left;font-size:16px;color:#353535;text-align:center;line-height:20px;margin:25px 0px 20px 0px;box-sizing:border-box;padding:0px 15px;}/*僅顯示消息時 showInformation方法填充提示西信息*/.alert_message_font{width:100%;float:left;font-size:16px;color:#353535;text-align:center;line-height:20px;margin:25px 0px 20px 0px !important;box-sizing:border-box;padding:0px 15px;}.show_alert_div .show_alert_button_box{width:100%;height:40px;position:absolute;bottom:0px;left:0px;border-top:1px solid #ccc;}.show_alert_div .show_alert_button_box .alert_button_div{width:50%;height:40px;float:left;font-size:18px;line-height:40px;text-align:center;color:#353535;box-sizing:border-box;border-right:1px solid #ccc;}.show_alert_div .show_alert_button_box .show_close_button{width:100%;height:40px;float:left;font-size:18px;line-height:40px;text-align:center;color:#353535;box-sizing:border-box;border-right:1px solid #ccc;}.show_cancel_button{width:50%;border-right:0;}/*輸入對話框樣式*/.show_alert_box_input{width:100%;position:fixed;top:0px;left:0px;background-color:rgba(0,0,0,0.6);display:none;z-index:200;}.show_alert_div_input{width:90%;position:absolute;top:50%;left:5%;margin-top:-80px;background-color:#fff;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #797979;overflow:hidden;box-sizing:border-box;}.show_alert_div_input h1{width:100%;float:left;font-size:20px;color:#353535;text-align:center;line-height:26px;margin-top:20px;}.show_alert_div_input h2{width:100%;float:left;font-size:14px;color:#353535;text-align:center;line-height:20px;margin:25px 0px 70px 0px;box-sizing:border-box;padding:0px 15px;}.show_alert_div_input .show_alert_button_box_input{width:100%;height:40px;position:absolute;bottom:0px;left:0px;border-top:1px solid #ccc;}.show_alert_div_input .show_alert_button_box_input .alert_button_div_input{width:50%;height:40px;float:left;font-size:18px;line-height:40px;text-align:center;color:#353535;box-sizing:border-box;border-right:1px solid #ccc;}.show_alert_div_input .show_alert_button_box_input .show_close_button_input{width:100%;height:40px;float:left;font-size:18px;line-height:40px;text-align:center;color:#353535;box-sizing:border-box;border-right:1px solid #ccc;}/*如何領獎提示框樣式*/.show_alert_box_how_button{width:100%;position:fixed;top:0px;left:0px;background-color:rgba(0,0,0,0.6);display:none;z-index:200;}.show_alert_div_how_button{width:90%;position:absolute;top:50%;left:5%;margin-top:-80px;background-color:#fff;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #797979;overflow:hidden;box-sizing:border-box;}.show_alert_div_how_button h1{width:100%;float:left;font-size:20px;color:#353535;text-align:center;line-height:26px;margin-top:20px;}.show_alert_div_how_button h2{width:100%;float:left;font-size:14px;color:#353535;text-align:center;line-height:20px;margin:25px 0px 70px 0px;box-sizing:border-box;padding:0px 15px;}.show_alert_div_how_button .show_alert_button_box_how_button{width:100%;height:40px;position:absolute;bottom:0px;left:0px;border-top:1px solid #ccc;}.show_alert_div_how_button .show_alert_button_box_how_button .alert_button_div_how_button{width:50%;height:40px;float:left;font-size:18px;line-height:40px;text-align:center;color:#353535;box-sizing:border-box;border-right:1px solid #ccc;}.show_alert_div_how_button .show_alert_button_box_how_button .show_close_button_how_button{width:100%;height:40px;float:left;font-size:18px;line-height:40px;text-align:center;color:#353535;box-sizing:border-box;border-right:1px solid #ccc;}js 代碼
$(function () {$(".show_close_button").click(function () {$(".show_alert_box").css("display", "none");});$(".show_cancel_button").click(function () {$(".show_alert_box").css("display", "none");});})/** 顯示提示對話框* title 標題* content 提示內容* isShowAlertButton 是否顯示操作按鈕 僅用于錯誤提示* url 多按鈕時 主按鈕跳轉url* urltext主按鈕內容提示西信息* isTimer是否自動關閉對話框,僅用于錯誤提示時* * 頁面布局 在頁面中添加如下代碼* <div class="show_alert_box"><div class="show_alert_div"><h1>恭喜您</h1><h2></h2><div class="show_alert_button_box"><div class="show_close_button">知道了</div><div onclick="requestLotteryPrize()" class="alert_button_div viewawardbtn">領取獎勵</div><div class="alert_button_div show_cancel_button">取消</div></div></div></div>* */function showInformation(title, content,isShowTitle,isShowAlertButton,isTimer,url, urltxt){$(".show_alert_div h1").html(title);$(".show_alert_div h2").html(content);// 隱藏標題if(isShowTitle!=null&&isShowTitle==false){$(".show_alert_div h1").css("display", "none");}if(url==null || url==""){//顯示單條$(".alert_button_div").css("display", "none");$(".show_close_button").css("display", "block");// 隱藏底部按鈕if(isShowAlertButton!=null&&isShowAlertButton==false){$(".show_alert_button_box").css("display", "none");$(".show_alert_div h2").addClass("alert_message_font");}// 定時自動關閉if(isTimer!=null&&isTimer==true){setTimeout("timerCloseAlertBox()",2000);}}else{//顯示多條$(".show_alert_div h2").css("display", "block");$(".viewaward").attr('href',url);$(".viewawardbtn").html(urltxt);/*注釋于2016-07-08 屏蔽底部取消領獎等按鈕 */$(".alert_button_div").css("display", "block");$(".show_close_button").css("display", "none"); /* $(".alert_button_div").css("display", "none");$(".show_close_button").css("display", "block") */}$('.show_alert_box').css("display", "block");}/** 彈出簡單信息提示* 頁面布局 在頁面中添加如下代碼* <div class="show_alert_box"><div class="show_alert_div"><h3></h3></div></div>*/function showAlertMessage(message){// 顯示提示框$('.show_alert_box').css("display", "block");// 填充信息提示$(".show_alert_div h3").html(message);// 自動關閉setTimeout("timerCloseAlertBox()",2000);}// 定時關閉提示框function timerCloseAlertBox(){$('.show_alert_box').css("display", "none");}使用示例
首先引用js文件,前提必須應用jquery.基礎js文件
然后引入樣式文件
在頁面任務位置添加一些div層
<div class="show_alert_box"><div class="show_alert_div"><h1>恭喜您</h1><h2></h2><div class="show_alert_button_box"><div class="show_close_button">知道了</div><div onclick="requestLotteryPrize()" class="alert_button_div viewawardbtn">領取獎勵</div><div class="alert_button_div show_cancel_button">取消</div></div></div></div>
在js中調用
參數(shù)分別是 標題 ,提示內容,是否顯示標題,是否顯示操作按鈕,是否啟用自動關閉,要跳轉的url 點擊要跳轉的按鈕描述文件信息
showInformation(title, content,isShowTitle,isShowAlertButton,isTimer,url, urltxt)方法或者showAlertMessage(message)
以上這篇js提示框替代系統(tǒng)alert,自動關閉alert對話框的實現(xiàn)方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答