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

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了js提示框替代系统alert,自动关闭alert对话框的实现方法，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

效果图

css样式

Box{ width:100%; height:100%; position:fixed; top:0px; left:0px; background-color:rgba(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_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");
});
})

/*

// 隐藏标题
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");
}

/*

*/ function showAlertMessage(message){

// 显示提示框
$('.showalertBox').css("display","block");

// 填充信息提示
$(".show_alert_div h3").html(message);

// 自动关闭
setTimeout("timerCloseAlertBox()",2000);
}

// 定时关闭提示框
function timerCloseAlertBox(){
$('.showalertBox').css("display","none");
}

使用示例

首先引用js文件，前提必须应用jquery.基础js文件

然后引入样式文件

在页面任务位置添加一些div层

Box">
恭喜您

Box">

在js中调用

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

方法或者

showAlertMessage(message)

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

alert对话框

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
js判断undefined和null
js判断undefined js判断null js判断null和undefined
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
聊一聊 bootstrap 的轮播图插件
今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作