JS prompt box Instead of system alert, Automatic Shutdown Alert dialog box implementation method _javascript Tips

I wrote an alert balloon. Because system alert is in the Apple phone's micro-mail, the top will display the Web site address when prompted.

At the same time, other follow-up operations need to continue to fill in JS. So simply use Div to write an alert prompt box, and automatically close.

Effect chart

CSS Styles

/* Pop-up message Dialog 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; margi
n-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; margi
n:25px 0px 20px 0px;
Box-sizing:border-box;
padding:0px 15px; /* Showinformation method fills the message only when messages are displayed * * 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
: 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}/* Enter dialog style/. show_alert_box_input{width:100%;
: 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:0
px
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; }/* How to receive the Prompt box style * * 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:0
px
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%;
: 40px;
Float:left;
font-size:18px;
line-height:40px;
Text-align:center;
Color: #353535;
Box-sizing:border-box;
border-right:1px solid #ccc; }

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");}); * * Show Prompt Dialog * Title * content hint * Isshowalertbutton whether the action button is displayed only for error hints * URL multiple button when the main button jump URL * Urltext main button content hint West information * Istimer whether the dialog box is automatically closed, only when the error is prompted * * Page layout adds the following code to the page * <div class= "Show_alert_box" > <div class= "Show_alert_div" > &L T;h1> Congratulations  

Using the sample

First refer to the JS file, the premise must apply jquery. Base JS file

Then introduce the style file

Add some div layers to the page task location

<div class= "Show_alert_box" >
<div class= "Show_alert_div" >
 
 

Call in JS

Parameters are headings, prompt content, whether to display the title, whether to show the action button, whether to turn on automatic shutdown, to jump the URL click to jump button description file information

Showinformation (title, Content,isshowtitle,isshowalertbutton,istimer,url, Urltxt) method or

Showalertmessage ( Message

Above this JS hint box to replace the system alert, Automatic Shutdown Alert dialog box to achieve the method is small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.