简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
Home > Web Front-end > JS Tutorial > body text

js prompt box replaces the system alert and automatically closes the alert dialog box.

高洛峰
Release： 2016-12-07 14:39:46
Original
1383 people have browsed it

I wrote an alert prompt box myself. Because the system alert is in WeChat on the Apple mobile phone, when prompted, the website address will be displayed at the top.

At the same time, other subsequent operations need to be filled in in js. So I simply wrote an alert prompt box using div and closed it automatically.

Rendering

js prompt box replaces the system alert and automatically closes the alert dialog box.

js prompt box replaces the system alert and automatically closes the alert dialog box.

css style

/*弹出消息对话框样式*/
.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;
}
Copy after login

js code

$(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");
}
Copy after login

Usage example

First To reference js files, you must use jquery.Basic js files

Then Introduce style files

Add some div layers at the page task position





恭喜您






知道了


领取奖励


取消
Copy after login

Call in js

The parameters are title, prompt content, whether to display the title, whether to display the operation button, whether to enable automatic closing, and jump Transfer URL Click the button to jump to describe the file information 

showInformation(title, content,isShowTitle,isShowAlertButton,isTimer,url, urltxt)方法或者
 
showAlertMessage(message)
Copy after login


Related labels：
js
source：php.cn
Previous article：JS uses slope to determine the four directions of the mouse entering a DIV Next article：Implementation of role-based front-end access control in AngularJs
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How to use open primitive tag in next js 13? In the recent NextJS13 update, they introduced a new way of handling meta tags that differ...
From 2023-11-10 23:03:51
0
1
527
Livewire undefined I'm having trouble deploying my LaravelLivewire project to the server. The problem is that...
From 2023-11-09 15:34:23
0
1
233
Vue js: Troubleshooting - Reading '$refs' property of undefined Getting the error Cannot read property of undefined (reading '$refs') even though I have a...
From 2023-11-07 23:34:12
0
1
305
Steps to install jQuery in Nuxt.js Although I try to add jQuery in my project, I get an error saying it's not defined. plugin...
From 2023-11-06 16:41:50
0
1
225
Unexpected behavior (white button bug) when using Tailwind and MUI in NextJS project I'm currently building a project using NextJS, TailwindCSS and the MUIReactUI library. Whe...
From 2023-11-04 11:04:23
0
1
178
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！