自己写了个alert提示框。因为系统alert在苹果手机微信中，提示时，顶部会显示网站地址。
同时其他后续操作需要在js中继续填写。因此简单用div写了一个alert提示框，并自动关闭。
效果图
css样式
.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_alertbuttonBox{
width:100%;
height:40px;
position:absolute;
bottom:0px;
left:0px;
border-top:1px solid #ccc;
}
.show_alert_div .show_alertbuttonBox .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_alertbuttonBox .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;
}
/输入对话框样式/
.showalertBox_input{
width:100%;
position:fixed;
top:0px;
left:0px;
background-color:rgba(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_alertbuttonBox_input{
width:100%;
height:40px;
position:absolute;
bottom:0px;
left:0px;
border-top:1px solid #ccc;
}
.show_alert_div_input .show_alertbuttonBox_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_alertbuttonBox_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;
}
/如何领奖提示框样式/
.showalertBox_how_button{
width:100%;
position:fixed;
top:0px;
left:0px;
background-color:rgba(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_alertbuttonBox_how_button{
width:100%;
height:40px;
position:absolute;
bottom:0px;
left:0px;
border-top:1px solid #ccc;
}
.show_alert_div_how_button .show_alertbuttonBox_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_alertbuttonBox_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 代码
<div class="jb51code">
<pre class="brush:js;">
$(function () {
$(".show_close_button").click(function () {
$(".showalertBox").css("display","none");
});
$(".show_cancel_button").click(function () {
$(".showalertBox").css("display","none");
});
})
/*
- 显示提示对话框
- title 标题
- content 提示内容
- isShowAlertButton 是否显示操作按钮 仅用于错误提示
- url 多按钮时 主按钮跳转url
- urltext主按钮内容提示西信息
- isTimer是否自动关闭对话框,仅用于错误提示时
- 页面布局 在页面中添加如下代码
-
<div class="showalertBox">
<div class="show_alert_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_alertbuttonBox").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","block") /
}
$('.showalertBox').css("display","block");
}
/*
