js提示框替代系统alert,自动关闭alert对话框的实现方法
自己写了个alert提示框。因为系统alert在苹果手机微信中，提示时，顶部会显示网站地址。
同时其他后续操作需要在js中继续填写。因此简单用div写了一个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对话框的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
基础教程
- HTML基础教程
- HTML5基础教程
- HTML参考手册
- SVG 教程
- CSS 教程
- CSS 参考手册
- CSS3教程
- Bootstrap3 教程
- Bootstrap4 教程
- Font Awesome图标
- JavaScript 教程
- JavaScript 参考手册
- jQuery 教程
- AJAX 教程
- JSON 教程
- AngularJS 教程
- ReactJS 教程
- NodeJS 教程
- Python 教程
- C++ 教程
- Golang 教程
- C 语言教程
- PHP 教程
- C# 教程
- LINQ 教程
- Lua 教程
- Ruby 教程
- Rust 教程
- Linux 教程
- R 语言教程
- Docker 教程
- Scala 教程
- MatLab 教程
- Erlang 教程
- Pandas教程
- Numpy教程
- Matplotlib教程
- Flask教程
- Java 教程
- SpringBoot 教程
- JDBC 教程
- JSP 教程
- Servlet 教程
- Maven 教程
- Spring 教程
- Django 教程
- Swift 教程
- Kotlin 教程
- SQL 教程
- MongoDB 教程
- SQLite 教程
- PostgreSQL 教程
- MySql 教程
- Redis 教程
- Elasticsearch 教程
猜你喜欢
- Angularjs的Controller间通信机制实例分析
- Ajax与用户交互的JSON数据存储格式
- JAVA实现 SpringMVC方式的微信接入、实现简单的自动回复功能
- jquery组件WebUploader文件上传用法详解
- Vue.js 和 MVVM 的注意事项
- Android集成微信支付功能
- iOS百度地图简单使用详解
- JS用斜率判断鼠标进入DIV四个方向的方法
- Android实现炫酷的网络直播弹幕功能
- 基于Phantomjs生成PDF的实现方法
- iOS 对象属性详细介绍
- mysql 5.6.14 win32 解压缩版（免安装）安装配置教程
- iOS实现播放远程网络音乐的核心技术点总结
- 扩展Bootstrap Tooltip插件使其可交互的方法
- java MyBatis拦截器Inteceptor详细介绍
- js提示框替代系统alert,自动关闭alert对话框的实现方法
- jQuery插件WebUploader实现文件上传
- AJax实现类似百度搜索栏的功能 (面试多见)
- iOS开发仿电商类APP首页实例
- Java Web 实现QQ登录功能一个帐号同一时间只能一个人登录
- jQuery利用sort对DOM元素进行排序操作
- AngularJS的ng Http Request与response格式转换方法
- .Net 垃圾回收机制详细介绍
- easyUI实现(alert)提示框自动关闭的实例代码
- Yii2框架BootStrap样式的深入理解