自定义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" οnclick="$(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" οnclick=\'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(){

扫描二维码关注公众号，回复： 8518530 查看本文章

     console.log("回调的语句在这里面写!");

  })