教你怎么用JavaScript+css写一个自定义消息框

本消息框需要jQuery库的支持

css代码：

/*弹窗的主体*/  
.ta_main{  
    width: 100%;  
    height: 100%;  
    background: rgb(57,154,254,0);  
    position:absolute;  
    z-index: 99999;  
    top:0;  
    display: none;  
    padding: 0;  
    margin: 0;  
}  
/*弹窗的本身*/  
.ta{  
    width: 300px;  
    height: 200px;  
    position: absolute;  
    left:50%;  
    top:50%;  
    margin-left: -150px;  
    margin-top: -100px;  
}  
/*弹窗上标题栏*/  
.ta_top{  
    width: 100%;  
    height: 30px;  
    background: #dfdfdf;  
    line-height: 30px;  
}  
/*弹窗中心内容位置*/  
.ta_bottom{  
    width: 100%;  
    height: 40px;  
    position:absolute;  
    bottom:0;  
    line-height: 40px;  
    background: #fff;  
}  
/*弹窗按钮位置*/  
.ta_bottom1{  
    width: 100%;  
    height: 40px;  
    background: #fff;  
    position:absolute;  
    bottom:0;  
    line-height: 40px;  
      
}  
.ta_midd{  
    width: 100%;  
    height: 130px;  
    background: #fff;  
    position: absolute;  
    top:30px  
}  
.ta_close_btn{  
    width: 20px;  
    height: 20px;  
    border: none;  
    float: right;  
    margin-right: 10px;  
    color: #399afe;  
    font-size: 20px;  
    background: #dfdfdf;  
}  
.ta_close_btn:hover{  
    color: #fff;  
    background: #dfdfdf;  
}  
.ta_queding_btn{  
    width: 100px;  
    height: 30px;  
    border-radius: 15px;  
    background: #FFf;  
    color: #399afe;  
    border: solid 1px #399AFE;  
    position: absolute;  
    left:50%;  
    top:5px;  
    margin-left: -50px;  
}  
.ta_queding_btn:hover{  
    background: #399AFE;  
    color: #fff;  
}  
.ta_btn{  
    width: 50px;  
    height: 30px;  
    border-radius: 15px;  
    background: #FFf;  
    color: #399afe;  
    border: none;  
    border: solid 1px #399AFE;  
    margin: 0 10px;  
}  
.ta_btn:hover{  
    color: #fff;  
    background: #399AFE;  
}  
.ta_text{  
    width: 250px;  
    height: 60px;  
    position: absolute;  
    left:50%;  
      
    top:60px;  
    margin-left: -125px;  
}  
.ta_midd img{  
    width: 150px;  
    height: 50px;  
    position: absolute;  
    left:50%;  
    top:5px;  
    margin-left: -75px;  
}  
.ta_ico{  
    width: 40px;  
    height: 40px;  
    border-radius: 50%;  
    margin-top:10px;  
    color: #399AFE;  
    text-align: center;  
    font-size: 40px;  
    line-height: 40px;  
}  
.ta_txt{  
    width: 200px;  
    height: 30px;  
    position: absolute;  
    top:15px;  
    left:50px;  
    line-height: 30px;  
    font-size: 9pt;  
    color: #989898;  
    text-align: center;  
     -webkit-user-select:none;  
        -moz-user-select:none;  
        -ms-user-select:none;  
        user-select:none;  
}  

JavaScript代码：

function init_taichuan(){  
    $("body").append("<div class='ta_main'><div class='ta'><div class='ta_top'><button class='ta_close_btn' id='ta_close_btn'><i class=' fa fa-remove'></i></button></div><div class='ta_midd'><img src='img/1.jpg' id='ta_logo'/><div class='ta_text'><div class='ta_ico'><i class='fa fa-thumbs-up' id='ta_ico'></i></div><div class='ta_txt'></div></div></div><div class='ta_bottom'><button class='ta_btn' style='margin-left: 90px;' id='ta_queren2'>确定</button><button class='ta_btn' id='ta_quxiao'>取消</button></div><div class='ta_bottom1'><button class='ta_queding_btn' id='ta_queren'>确定</button></div></div></div>")  
}  
init_taichuan()//初始化窗口  
//消息窗口的确认按钮  
function queren1(fun){  
    $('#ta_queren').on('click',fun) ;             
}  
//确认窗口的确认按钮  
function queren2(fun){  
    $('#ta_queren2').on('click',fun);             
}  
//确认窗口的取消按钮  
function quxiao(fun){  
    $('#ta_quxiao').on('click',fun) ;             
}  
//窗口关闭按钮  
$('#ta_close_btn').on('click',function(){  
        $('.ta_main').fadeOut()  
});  
//窗口的样式  
/** 
 *  
 * @param {Object} ico 第三方图标库图标类名 
 * @param {Object} txt 窗口上提示的内容 
 * @param {Object} type 窗口的类型[空字符串为消息框] 
 * @param {Object} logo 窗口的显示的图像路径 
 */  
function taichuan(ico,txt,type,logo){  
      
    if(type!=''){  
        $('.ta_bottom1').hide()  
    }else{  
        $('.ta_bottom').hide()  
    }  
    $('#ta_ico').removeClass('fa-thumbs-up');  
    $('#ta_ico').addClass(ico);  
    $('.ta_txt').text(txt);  
    $('#ta_logo').attr('src',logo)  
      
}  
taichuan('fa-yen','gggggg','2','img/m3.jpg');  
quxiao(function(){alert('123')});  
queren1(function(){alert('456')});  
queren2(function(){alert('789')});