首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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对话框的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
javascript中数组方法汇总
Jul 07 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
JS实现给数组对象排序的方法分析
Jun 24 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
AM(1) 春雷3P7(1) 探测器(1) ICF-2010(1) 实习报告(1) 频偏(1) 原理(1) 发烧友(1) 电路(15) 单管机(1)
You might like
PHP Memcached应用实现代码
2010/02/08 PHP
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
Code：loadScript( )加载js的功能函数
2007/02/02 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
python入门前的第一课 python怎样入门
2018/03/06 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
python实现的发邮件功能示例
2019/09/11 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
Python双链表原理与实现方法详解
2020/02/22 Python
python实现超级马里奥
2020/03/18 Python
Python字符串三种格式化输出
2020/09/17 Python
这76道Java面试题及答案，祝你能成功通过面试
2016/04/16 面试题
材料加工工程求职信
2014/02/19 职场文书
挂牌仪式主持词
2014/03/20 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
保卫工作个人总结
2015/03/03 职场文书
党员承诺书格式范文
2015/04/28 职场文书
目标责任书格式范文
2015/05/11 职场文书
毕业生求职自荐信（2016最新版）
2016/01/28 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
小公司融资，商业计划书的8切记
2019/07/15 职场文书
Oracle锁表解决方法的详细记录
2022/06/05 Oracle