js提示框替代系統(tǒng)alert,自動(dòng)關(guān)閉alert對(duì)話(huà)框的實(shí)現(xiàn)方法
更新時(shí)間：2016年11月07日 11:26:47 投稿：jingxian
下面小編就為大家?guī)?lái)一篇js提示框替代系統(tǒng)alert,自動(dòng)關(guān)閉alert對(duì)話(huà)框的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
自己寫(xiě)了個(gè)alert提示框。因?yàn)橄到y(tǒng)alert在蘋(píng)果手機(jī)微信中，提示時(shí)，頂部會(huì)顯示網(wǎng)站地址。
同時(shí)其他后續(xù)操作需要在js中繼續(xù)填寫(xiě)。因此簡(jiǎn)單用div寫(xiě)了一個(gè)alert提示框，并自動(dòng)關(guān)閉。
效果圖
css樣式
/*彈出消息對(duì)話(huà)框樣式*/
.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;
}
/*僅顯示消息時(shí) 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;
}
/*輸入對(duì)話(huà)框樣式*/
.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;
}
/*如何領(lǐng)獎(jiǎng)提示框樣式*/
.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");
});
})
/*
* 顯示提示對(duì)話(huà)框
* title 標(biāo)題
* content 提示內(nèi)容
* isShowAlertButton 是否顯示操作按鈕 僅用于錯(cuò)誤提示
* url 多按鈕時(shí) 主按鈕跳轉(zhuǎn)url
* urltext主按鈕內(nèi)容提示西信息
* isTimer是否自動(dòng)關(guān)閉對(duì)話(huà)框,僅用于錯(cuò)誤提示時(shí)
*
* 頁(yè)面布局 在頁(yè)面中添加如下代碼
*
<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">領(lǐng)取獎(jiǎng)勵(lì)</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);
// 隱藏標(biāo)題
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");
}
// 定時(shí)自動(dòng)關(guān)閉
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 屏蔽底部取消領(lǐng)獎(jiǎng)等按鈕 */
$(".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");
}
/*
* 彈出簡(jiǎn)單信息提示
* 頁(yè)面布局 在頁(yè)面中添加如下代碼
* <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);
// 自動(dòng)關(guān)閉
setTimeout("timerCloseAlertBox()",2000);
}
// 定時(shí)關(guān)閉提示框
function timerCloseAlertBox(){
$('.show_alert_box').css("display", "none");
}
使用示例
首先引用js文件，前提必須應(yīng)用jquery.基礎(chǔ)js文件
然后引入樣式文件
在頁(yè)面任務(wù)位置添加一些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">領(lǐng)取獎(jiǎng)勵(lì)</div> <div class="alert_button_div show_cancel_button">取消</div> </div> </div> </div>
在js中調(diào)用
參數(shù)分別是 標(biāo)題 ，提示內(nèi)容，是否顯示標(biāo)題，是否顯示操作按鈕，是否啟用自動(dòng)關(guān)閉，要跳轉(zhuǎn)的url 點(diǎn)擊要跳轉(zhuǎn)的按鈕描述文件信息
showInformation(title, content,isShowTitle,isShowAlertButton,isTimer,url, urltxt)方法或者 showAlertMessage(message)
以上這篇js提示框替代系統(tǒng)alert,自動(dòng)關(guān)閉alert對(duì)話(huà)框的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaScript Alert通用美化類(lèi)
- javascript中常見(jiàn)的3種信息提示框(alert,prompt,confirm)
- javascript重寫(xiě)alert方法的實(shí)例代碼
- Js,alert出現(xiàn)亂碼問(wèn)題的解決方法
- Javascript alert消息換行的方法
- js的alert彈出框出現(xiàn)亂碼解決方案
- JavaScript中的alert()函數(shù)使用技巧詳解
- JavaScript常用的3種彈出框(提示框?alert/確認(rèn)框?confirm/輸入框?prompt)
- JavaScript中alert的使用方法超詳細(xì)介紹
相關(guān)文章
基于IE下ul li 互相嵌套時(shí)的bug,排查,解決過(guò)程以及心得介紹
昨天到今天上午都在查一個(gè)IE的bug，情形如下：通過(guò)異步請(qǐng)求獲取json數(shù)據(jù)，然后拼接成html代碼，最后使用innerHTML類(lèi)似方法插入到文檔流中。在chrome下和IE8\9下均表現(xiàn)正常。結(jié)果已進(jìn)入IE7，瀏覽器就崩潰，更別提IE6了，也是一副死給你看的樣子。于是我就把這個(gè)bug定位于IE6\7，其實(shí)這時(shí)候我已經(jīng)陷入了這個(gè)固定思維模式中，浪費(fèi)了不少時(shí)間2013-05-05
這篇文章主要介紹了微信小程序 彈窗輸入組件的實(shí)現(xiàn)解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
js判斷瀏覽器類(lèi)型為ie6時(shí)不執(zhí)行
這篇文章主要介紹了js怎么判斷瀏覽器類(lèi)型，當(dāng)類(lèi)型為ie6時(shí)如何不執(zhí)行,需要的朋友可以參考下2014-06-06
JS實(shí)現(xiàn)雙擊屏幕滾動(dòng)效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)雙擊屏幕滾動(dòng)效果代碼,涉及JavaScript鼠標(biāo)事件的響應(yīng)及頁(yè)面元素屬性的動(dòng)態(tài)變換技巧,需要的朋友可以參考下2015-10-10
驗(yàn)證javascript中Object和Function的關(guān)系的三段簡(jiǎn)單代碼
今天重溫經(jīng)典書(shū)籍。這一次看的是博客園李戰(zhàn)老師寫(xiě)的<<悟透JavaScript>>，也是被樓豬翻看最多的技術(shù)書(shū)籍之一。2010-06-06
這篇文章主要介紹了JS中Promise的使用及封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
uni-app實(shí)現(xiàn)點(diǎn)贊評(píng)論功能
這篇文章主要介紹了uni-app實(shí)現(xiàn)點(diǎn)贊評(píng)論功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
利用Query+bootstrap和js兩種方式實(shí)現(xiàn)日期選擇器
日期選擇器在我們平時(shí)開(kāi)發(fā)的時(shí)候經(jīng)常要用到，下面這篇文章主要給大家介紹了利用Query+bootstrap和js這兩種方式實(shí)現(xiàn)日期選擇器的方法,文中兩種方法都給出了詳細(xì)的示例代碼，有需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-01-01
JS首屏加載時(shí)間優(yōu)化的解決方法總結(jié)
首屏加載時(shí)間是一個(gè)衡量網(wǎng)頁(yè)性能和用戶(hù)體驗(yàn)的關(guān)鍵指標(biāo),這個(gè)問(wèn)題無(wú)論是在面試中還是在項(xiàng)目開(kāi)發(fā)中都占有極其高的權(quán)重,本文為大家整理了幾種JS中優(yōu)化首屏加載時(shí)間的方法,希望對(duì)大家有所幫助2024-02-02
js實(shí)現(xiàn)可得到不同顏色值的顏色選擇器實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)可得到不同顏色值的顏色選擇器,實(shí)例分析了javascript顏色操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02