在项目的实际开发过程中,很多地方需要用到警告框.但是系统自带的alert样式太难看,并且会阻塞线程,所以我想重写alert函数,我希望的效果是html直接在js里面生成,不需要在每个页面都要加上alert那一段html片段.
首先引入jquery,保证重写alert的脚本要写到一个所有页面都会共用的一个js文件里,然后样式加到你css里面,再引入一张图片。实际使用当中直接使用alert("hello wrold")即可,其他的都不用管.
var alertobj={
left:0,
top:0,
pagex:0,
pagey:0,
flag:false,
mousedown: null,
mousemove: null,
mouseup: null,
}
/*重写alert*/
window.alert=function(msg,cb){
if($("#alert").length>0)
{
/* $("#alertcontent").text(msg);
$(".alertbox").css("top","40%").css("left","40%");
$("#alert").show();*/
$("#alert").remove();
}
$("body").append('<div class="alert" id="alert"><div class="alertbox">'+
'<div class="alerthead" id="alerthead"><s class="lt">提示信息</s><s class="gt" onclick="$(this).parents(\'.alert\').hide();">'+
'<img src="alertcha.png"'+ 'alt=""></s><div class="clear"></div></div><div class="alertbody"><div class="alertcontent" id="alertcontent">'+msg+'</div>'+
'<p><a class="alertbtn" onclick=\'closealertbox(event,'+cb+')\'>确定</a></p></div></div></div>');
if(document.documentElement.style.boxShadow===undefined)
{
$(".alertbox").css("border","1px solid #eee")
}
alertobj.left=parseInt($(".alertbox").css("left"));
alertobj.top=parseInt($(".alertbox").css("top"));
alertobj.mousedown = function (e) {
$('#alerthead')[0].selectstart = function () {
return false;
};
alertobj.pagex = e.pageX;
alertobj.pagey = e.pageY;
alertobj.flag = true;
};
alertobj.mousemove = function (e) {
if (alertobj.flag) {
var rangex = e.pageX - alertobj.pagex - 0;
var rangey = e.pageY - alertobj.pagey - 0;
$('.alertbox').css('left', parseInt(alertobj.left) + rangex + 'px');
$('.alertbox').css('top', parseInt(alertobj.top) + rangey + 'px');
}
};
alertobj.mouseup = function (e) {
alertobj.flag = false;
alertobj.left = parseInt($('.alertbox').css('left'));
alertobj.top = parseInt($('.alertbox').css('top'));
};
$('#alerthead').mousedown(alertobj.mousedown);
$(document).mousemove(alertobj.mousemove);
$(document).mouseup(alertobj.mouseup);
}
/*关闭对话框*/
function closealertbox(event,cb){
//事件解绑
if (alertobj.mousedown) {
$('#alerthead').unbind('mousedown', alertobj.mousedown);
alertobj.mousedown = null;
}
if (alertobj.mousemove) {
$(document).unbind('mousemove', alertobj.mousemove);
alertobj.mousemove = null;
}
if (alertobj.mouseup) {
$(document).unbind('mouseup', alertobj.mouseup);
alertobj.mouseup = null;
}
var target=event.target||event.srcElement;
if(cb)
{
$(target).parents('.alert').hide();
cb();
}else{
$(target).parents('.alert').hide();
}
}
css样式:
.alert
{
position:fixed;
top:0px;
left:0px;
right:0px;
bottom:0px;
z-index:10000;
}
.alertbox
{
width: 300px;
position: absolute;
font-size: 14px;
-moz-box-shadow:0 0 5px #000;/*firefox*/
box-shadow: 0 0 5px #000;
font-family: "microsoft yahei";
left:40%;
top:40%;
}
.alerthead
{
padding: 10px 22px;
padding-right: 18px;
background-color:#f7f7f7;
color:#313134;
border-bottom:1px solid #ededed;
cursor:move;
}
.alertbody{
background-color:#fff;
padding:26px 18px 14px 24px;
}
.alertcontent
{
color:#000;
}
.alertbody>p
{
margin-top: 20px;
text-align: right;
margin-bottom: 0px;
}
.alertbtn{
display:inline-block;
width:60px;
height:30px;
background-color:#146eb4;
border-radius:4px;
color:#fff;
text-align:center;
line-height:30px;
cursor:pointer;
}
.alertbtn:hover
{
background-color:#146eb4;
}
.alerthead .gt
{
cursor:pointer;
margin-top: -3px;
}
.alerthead .gt>img
{
width: 15px;
height: 15px;
}
.gt { float: right; }
s { text-decoration: none; }
需要用到的一张图片:
在window.alert这个函数里面将alertcha.png路径改一下
最终的效果图:
如果你想点击确定后再执行某些操作可以这样调用:
alert("操作完毕",function(){
console.log("回调的语句在这里面写!");
})