当我们需要页面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("");
});