秋痕语录

面向对象-自定义警告框

QQ截图20171012095844.jpg

html页面代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="alert.css"/>
        <script src="alert.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    </body>
</html>
<script type="text/javascript">
    var customAlert = new Alert("留言成功!",function(){
        console.log('警告框要消失了')
    })
    customAlert.show()
</script>

css样式如下:

html{
    width: 100%;height: 100%;
}
body{
    height: 100%;
    margin: 0;
}
div.mask-div{
    width: 100%;height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: 0.5;
    z-index: 9999;
}
div.box-div{
    width: 300px;height: 150px;
    border: 1px solid silver;
    z-index: 10000;
    background-color: #f6f6f6;
    border-radius: 10px;
    position: absolute;
    top: calc(50% - 150px / 2);
    left: calc(50% - 300px / 2);
    box-shadow: 0 0 4px #444;
}
div.box-div .msg-div{
    text-align: center;
    margin-top: 40px;
    color: #444;
}
div.box-div .btnBar-div{
    height: 50px;
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #ccc;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top: 1px solid silver;
}
div.btnBar-div .btn-div{
    width: 150px;height: 50px;
    cursor: pointer;
    margin: 0 auto;
    text-align: center;
    line-height: 50px;
}

页面js代码:

//自定义警告框
//警告框的构造函数
function Alert(message,action){
    //展示的提示信息
    this.message = message
    //回调函数:首先传递一个函数而不执行它。在内部保留这个函数,当满足某些条件后再来执行这个函数通知外边这里已经执行完毕
    //这就是回调函数
    this.action = action
}
//在原型里面添加方法
//创建最外层div
Alert.prototype.showMask = function(){
    document.documentElement.style.overflow = 'hidden'
    var mask = document.createElement('div');
    mask.className = 'mask-div';
    document.body.appendChild(mask);
}
Alert.prototype.showBox = function(){
    var box = document.createElement('div')
    box.className = 'box-div';
    document.body.appendChild(box)
    
    var msg = document.createElement('div')
    msg.className = 'msg-div'
    msg.innerText = this.message
    box.appendChild(msg)
    
    var btnBar = document.createElement('div')
    btnBar.className = 'btnBar-div'
    box.appendChild(btnBar)
    
    var btn = document.createElement('div')
    btn.className = 'btn-div'
    btn.innerText = '确定'
    btnBar.appendChild(btn)
    var _this = this
    btn.onclick = function(){
        //去掉挡板和警告框
        _this.close()
        //回调函数,告诉使用警告框的人,警告框要消失了
        if (typeof _this.action == 'function') {
            _this.action();
        }
    }
}
//去掉挡板和警告框
Alert.prototype.close = function(){
    var maskDiv = document.getElementsByClassName('mask-div')[0];
    var boxDiv = document.getElementsByClassName('box-div')[0];
    document.body.removeChild(maskDiv);
    document.body.removeChild(boxDiv);
    document.documentElement.style.overflow = 'auto';
}
//展示这个自定义警告框
Alert.prototype.show = function(){
    this.showMask()
    this.showBox()
}


打赏

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

©2017 Lxy 豫ICP备17013024号
Copyright2017 lixueyang All Rights Reserved

公告

Welcome to my blog, where you will experience the thrill of not exceeding