js提示框替代系统alert,自动关闭alert对话框的实现方法


Posted in Javascript onNovember 07, 2016

自己写了个alert提示框。因为系统alert在苹果手机微信中,提示时,顶部会显示网站地址。

同时其他后续操作需要在js中继续填写。因此简单用div写了一个alert提示框,并自动关闭。

效果图

js提示框替代系统alert,自动关闭alert对话框的实现方法

js提示框替代系统alert,自动关闭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中调用

参数分别是 标题 ,提示内容,是否显示标题,是否显示操作按钮,是否启用自动关闭,要跳转的url 点击要跳转的按钮描述文件信息

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

showAlertMessage(message)

以上这篇js提示框替代系统alert,自动关闭alert对话框的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
JavaScript This指向问题详解
Nov 25 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 #Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 #Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 #Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 #Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 #Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 #Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 #Javascript
You might like
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
纯php生成随机密码
2015/10/30 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
Python中操作MySQL入门实例
2015/02/08 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
自我鉴定范文200字
2013/10/02 职场文书
最新奶茶店创业计划书
2014/01/25 职场文书
主管会计岗位责任制
2014/02/10 职场文书
聘用意向书范本
2014/04/01 职场文书
保护环境倡议书300字
2014/05/19 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
公司人事任命通知
2015/04/20 职场文书
旅游项目合作意向书
2015/05/08 职场文书
公司员工管理制度
2015/08/04 职场文书
三下乡活动心得体会
2016/01/23 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS
Mysql开启外网访问
2022/05/15 MySQL