alert样式修改

 

HTML:

 <div id="div">1223325</div>

CSS: 

    .btn_alert button{font-size: 1em;border: none;width: 2rem;height: .8rem;line-height: .8rem;color: #fff;}
    .btn_alert button:first-child{background:#26AD60;border-radius:0 0 0 10px;}
    .btn_alert button:last-child{background:#ccc;border-radius:0 0 10px 0;}
    #shield{position: absolute;left: 0;top: 0;width: 100%;background: rgba(0,0,0,.3);text-align: center;z-index: 99;}
    #alertFram{
        padding-top: 10px;width: 4rem;position: absolute;left: 50%;top: 50%;text-align: center;z-index: 300;margin-left: -2rem;margin-top: -1.5rem}
    #alertFram ul{width: 100%;list-style: none;padding: 0;margin: 0;}
    #alertFram li:first-child{height: 1.5rem;line-height: 1.5rem;font-size: 1em; background: #fff; border-radius: 10px 10px 0 0;}

JS：

$('#div').on('click',function(){
        alert('确定要关闭吗？');
    });


window.alert = function(str)
{
    var sHeight = document.body.scrollHeight;
    var shield = document.createElement("DIV");
    shield.id = "shield";
    $(shield).css({height:sHeight+'px'});

    var alertFram = document.createElement("DIV");
    alertFram.id="alertFram";

   var strHtml= "<ul><li >"+str+"</li><li class='btn_alert'>" +
            "<button onclick=\"doOk()\">确 定</button><button onclick=\"doOk()\">取 消</button>"+
        "</li></ul>";

    $(alertFram).append(strHtml);
    document.body.appendChild(alertFram);
    document.body.appendChild(shield);
    this.doOk = function(){
        alertFram.style.display = "none";
        shield.style.display = "none";
    };
    alertFram.focus();
    document.body.onselectstart = function(){return false;};
};