入门客AI创业平台(我带你入门,你带我飞行)
博文笔记

js重写alert函数

创建时间:2016-08-12 投稿人: 浏览次数:2074


当我们需要页面alert弹出窗口更加漂亮更加简洁时,需要使用js重写alert函数


当调用alert()函数时页面会执行以下命令,  显示重写的div区域以及传入的信息

<script type="text/javascript">
//重写JS原生alert函数
window.alert=function(e){
$(".can").show();
$("#error_info").html(e);
}

显示的div区域

<div id="" class="can" style="display:none">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" id="cls" >×</button>
<h4 class="modal-title" id="modalBasicLabel_8">Error</h4>
</div>
<div class="modal-body">
<div class="form-group">
                   <p class="res" id="error_info"></p>
                </div>
</div>
<div class="modal-footer">
<button type="button" class="cancle" id="btn">确 定</button>
</div>
</div>
</div>


以及其css样式
.modal-content {
position: relative;
float:inherit;
left:55px;
top:-195px;
width:200px;
height:125px;
z-index:999;
background-color: #fff;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
outline: 0;
}


.modal-header {
padding: 8px;
border-bottom: 1px solid #e5e5e5;
}


.close {
float:right;
margin-top: -3px;
height: 20px;
line-height: 18px;
}


.cancle {
float: right;
margin-right: 7px;
margin-top: 4px;
line-height: 20px;
height: 24px;
}


.modal-title {
margin: 0;
line-height: 1;
color:#0E7D76;
}


.modal-body {
position: relative;
}


.modal-footer {
border-top: 1px solid #e5e5e5;
}


.form-group {
margin-left: 10px;
}


.res {
font-size : 12pt;
font-family : Arial;
    color : orange;
}



最后设置回车按键以及点击关闭弹出窗口js命令


alert(res);


$(".bodylg").keydown(function(){
  if(window.event.keyCode==13){
    $("#can").html("");
     } 
   });

$("#can").on("click","#cls,#btn",function(){
$("#can").html("");
});

声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。