html弹出框还没点击确定自动关闭,js提示框替代系统alert,自动关闭alert对话框的实现方法...

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;

}