js重写alert函数
当我们需要页面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("");
});
- 上一篇: session验证登录状况拦截器以及XML配置
- 下一篇:没有了