成熟丰满熟妇高潮XXXXX,人妻无码AV中文系列久久兔费 ,国产精品一国产精品,国精品午夜福利视频不卡麻豆

您好，歡迎來到九壹網(wǎng)。
搜索
您的當前位置：首頁js提示框替代系統(tǒng)alert,自動關(guān)閉alert對話框的實現(xiàn)方法

js提示框替代系統(tǒng)alert,自動關(guān)閉alert對話框的實現(xiàn)方法

來源：九壹網(wǎng)
自己寫了個alert提示框。因為系統(tǒng)alert在蘋果手機微信中，提示時，頂部會顯示網(wǎng)站地址。

同時其他后續(xù)操作需要在js中繼續(xù)填寫。因此簡單用div寫了一個alert提示框，并自動關(guān)閉。

效果圖

20161114114050736.jpg

20161114114050736.jpg

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;
}
 
/*如何領(lǐ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");
});
})
 
/*
* 顯示提示對話框
* title 標題
* content 提示內(nèi)容
* isShowAlertButton 是否顯示操作按鈕 僅用于錯誤提示
* url 多按鈕時 主按鈕跳轉(zhuǎn)url
* urltext主按鈕內(nèi)容提示西信息
* isTimer是否自動關(guān)閉對話框,僅用于錯誤提示時
*
* 頁面布局 在頁面中添加如下代碼
*
<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)取獎勵</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");
}
 
// 定時自動關(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)獎等按鈕 */
$(".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);
 
// 自動關(guān)閉
setTimeout("timerCloseAlertBox()",2000);
}
 
// 定時關(guān)閉提示框
function timerCloseAlertBox(){
$('.show_alert_box').css("display", "none");
}

使用示例

首先引用js文件，前提必須應(yīng)用jquery.基礎(chǔ)js文件

然后引入樣式文件

在頁面任務(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)取獎勵</div>
<div class="alert_button_div show_cancel_button">取消</div>
</div>
</div>
</div>

在js中調(diào)用

參數(shù)分別是 標題 ，提示內(nèi)容，是否顯示標題，是否顯示操作按鈕，是否啟用自動關(guān)閉，要跳轉(zhuǎn)的url 點擊要跳轉(zhuǎn)的按鈕描述文件信息

showInformation(title, content,isShowTitle,isShowAlertButton,isTimer,url, urltxt)方法或者
 
showAlertMessage(message)

Copyright ? 2019- 91gzw.com 版權(quán)所有 湘ICP備2023023988號-2

違法及侵權(quán)請聯(lián)系：TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)