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("");
});

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值