自定义alert(支持拖拽)

          在项目的实际开发过程中,很多地方需要用到警告框.但是系统自带的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}  /*重写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"));        $("#alerthead").mousedown(function(e){            $("#alerthead")[0].selectstart=function(){                return false;            }            alertobj.pagex=e.pageX;            alertobj.pagey=e.pageY;            alertobj.flag=true;        })        $(document).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");            }        })        $(document).mouseup(function(e){            alertobj.flag=false;            alertobj.left=parseInt($(".alertbox").css("left"));            alertobj.top=parseInt($(".alertbox").css("top"));        })    }/*关闭对话框*/function closealertbox(event,cb){    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("回调的语句在这里面写!");

  })