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 相关文章推荐
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
dess中一个简单的多路委托的实现
Jul 20 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
vue请求数据的三种方式
Mar 04 Javascript
微信小程序仿抖音短视频切换效果的实例代码
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
You might like
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
详谈PHP编码转换问题
2015/07/28 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
Python Selenium库的基本使用教程
2021/01/04 Python
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
毕业生求职简历中的自我评价
2013/10/18 职场文书
车间副主任岗位职责
2013/12/24 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
关于教师节的广播稿
2014/09/10 职场文书
龙猫观后感
2015/06/09 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
background-position百分比原理详解
2021/05/08 HTML / CSS
SQL之各种join小结详细讲解
2021/08/04 MySQL