首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

作者：迷路 | 来源：互联网 | 2022-03-26 00:19
下面小编就为大家带来一篇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是否自动关闭对话框,仅用于错误提示时
* 
* 页面布局 在页面中添加如下代码
* 





恭喜您






知道了


领取奖励


取消







* */
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");
}

/*
* 弹出简单信息提示
* 页面布局 在页面中添加如下代码
* 









*/
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层





恭喜您






知道了


领取奖励


取消

在js中调用

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

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

showAlertMessage(message)

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


推荐阅读
  • button

    使用jQuery操作多个div的显示与隐藏

    本文介绍了如何利用jQuery实现对网页上多个div元素的显示与隐藏控制，包括基本的toggle方法及更复杂的显示隐藏逻辑。 ... [详细]
  • react

    全面覆盖的前端技术资源大全

    本文提供了一个详尽的前端开发资源列表，涵盖了从基础入门到高级应用的各个方面，包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
  • html

    实现Win10与Linux服务器的SSH无密码登录

    实现Win10与Linux服务器的SSH无密码登录
    本文介绍了如何在Windows 10环境下使用Git工具，通过配置SSH密钥对，实现与Linux服务器的无密码登录。主要步骤包括生成本地公钥、上传至服务器以及配置服务器端的信任关系。 ... [详细]
  • button

    为何引入jQuery UI自动完成功能后，我的列表框也受到影响？

    我在尝试将组合框转换为具有自动完成功能时遇到了一个问题，即页面上的列表框也被转换成了自动完成下拉框，而不是保持原有的多选列表框形式。 ... [详细]
  • html

    支付宝免费提现攻略详解

    在日常生活中，支付宝已成为不可或缺的支付工具之一。本文将详细介绍如何通过支付宝实现免费提现，帮助用户更好地管理个人财务，避免不必要的手续费支出。 ... [详细]
  • html

    ARM平台下构建SSH服务端并实现远程访问

    本文详细介绍了如何在ARM架构的目标设备上部署SSH服务端，包括必要的软件包下载、交叉编译过程以及最终的服务配置与测试。适合嵌入式开发人员和系统集成工程师参考。 ... [详细]
  • view

    Vulnhub DC3 实战记录与分析

    Vulnhub DC3 实战记录与分析
    本文记录了在 Vulnhub DC3 靶机上的渗透测试过程，包括漏洞利用、内核提权等关键步骤，并总结了实战经验和教训。 ... [详细]
  • html

    使用kermit通过串口升级uboot

    在开发板的启动选项中看到如下两行：7:LoadBootLoadercodethenwritetoFlashviaSerial.9:LoadBootLoadercodethenwri ... [详细]
  • console

    h5调用本地摄像头和麦克风一

    h5调用本地摄像头和麦克风一
    h5调用本地摄像头和麦克风一,Go语言社区,Golang程序员人脉社 ... [详细]
  • html

    41款高效LISP工具助力数据处理全流程

    本文由公众号【数智物语】(ID: decision_engine)发布，关注获取更多干货。文章探讨了从数据收集到清洗、建模及可视化的全过程，介绍了41款实用工具，旨在帮助数据科学家和分析师提升工作效率。 ... [详细]
  • view

    Vue CLI 3 项目中使用 Pre-render SPA Plugin 进行预渲染

    页面预渲染适用于主要包含静态内容的页面。对于依赖大量API调用的动态页面，建议采用SSR（服务器端渲染），如Nuxt等框架。更多优化策略可参见：https://github.com/HaoChuan9421/vue-cli3-optimization ... [详细]
  • html

    AOJ1024 清洁机器人2.0

    本文介绍了一个来自AIZU ONLINE JUDGE平台的问题，即清洁机器人2.0。该问题来源于某次编程竞赛，涉及复杂的算法逻辑与实现技巧。 ... [详细]
  • html

    egg实现登录鉴权（七）：权限管理

    egg实现登录鉴权（七）：权限管理
    权限管理包含三部分：访问页面的权限，操作功能的权限和获取数据权限。页面权限：登录用户所属角色的可访问页面的权限功能权限：登录用户所属角色的可访问页面的操作权限数据权限：登录用户所属 ... [详细]
  • view

    iOS开发中的UIView及其子类应用

    本文介绍了用户界面（User Interface, UI）的基本概念，以及在iOS应用程序中UIView及其子类的重要性和使用方式。文章详细探讨了UIView如何作为用户交互的核心组件，以及它与其他UI控件和业务逻辑的关系。 ... [详细]
  • webkit

    使用Python爬取妙笔阁小说信息并保存为TXT和CSV格式

    本文介绍了如何使用Python爬取妙笔阁小说网仙侠系列中所有小说的信息，并将其保存为TXT和CSV格式。主要内容包括如何构造请求头以避免被网站封禁，以及如何利用XPath解析HTML并提取所需信息。 ... [详细]
author-avatar
迷路
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有