alert效果

Posted 2020-08-10 王子秦

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了alert效果相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>拉伸效果</title>
<style>
.mask50 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, .5);
    overflow: auto;
}

.js-alertFn {
    width: 9.36rem;
    position: absolute;
    z-index: 11111;
    background: #ffffff;
    left: 50%;
    top: 50%;
    margin-left: -4.68rem;
    -webkit-border-radius: .2rem;
    -moz-border-radius: .2rem;
    border-radius: .2rem;
    overflow: hidden;
}

.js-alertFn table {
    border-collapse: collapse;
    width: 100%;
    border: .01rem solid #fff;
    margin-left: -1px;
    height: 100px
}

.js-alertFn table tr td {
    border-top: 1px solid #d4d4d4;
    border-left: 1px solid #d4d4d4;
    text-align: center;
    padding: .2rem .4rem;
    line-height: .8rem;
    font-size: .5rem;
    color: #333;
    padding: 1rem .3rem;
}

.js-alertFn table tr:last-child td {
    height: 1rem;
    width: 50%;
    padding: .3rem !important;
}
</style>
</head>
<body>
<button onclick="selfAlert({})">确定</button>
</body>
</html>
<script type="text/javascript">
!function(a){function b(){ var b=g.getBoundingClientRect().width;a.rem=b/10.8,g.style.fontSize=a.rem+"px"}var g=a.document.documentElement,e;a.addEventListener("resize",function(){clearTimeout(e),e=setTimeout(b,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(e),e=setTimeout(b,300))},!1),b()}(window);
//弹出框方法
function alertFn(jn) {
    this.json = {
        msg : jn.msg || "系统错误",
        btntxt : jn.btntxt || [ ‘确定‘, ‘取消‘ ],
        type : jn.type || 2,
        sure : jn.sure,
        cancell : jn.cancell
    }
    this.init();
    this.DOMlayout();
}

alertFn.prototype.init = function() {
    var mask = document.querySelector("#mask");
    if (mask) {
        mask.parentNode.removeChild(mask);
    }
}

alertFn.prototype.DOMlayout = function() {
    var self = this;
    var mask = document.createElement("div");
    mask.className = "mask50";
    mask.setAttribute("id", "mask")
    if (this.json.type === 1) {
        var alertBox = ‘<div class="js-alertFn"><table><tr>‘;
        alertBox += ‘<td colspan="2">‘ + this.json.msg + ‘</td></tr>‘;
        alertBox += ‘<tr><td id="cancel">‘ + this.json.btntxt[1]
                + ‘</td><td id="sure">‘ + this.json.btntxt[0] + ‘</td></tr>‘;
        alertBox += ‘</table></div>‘;
    } else {
        var alertBox = ‘<div class="js-alertFn"><table><tr>‘;
        alertBox += ‘<td>‘ + this.json.msg + ‘</td></tr>‘;
        alertBox += ‘<tr><td id="sure">‘ + this.json.btntxt[0] + ‘</td></tr>‘;
        alertBox += ‘</table></div>‘;
    }
    mask.innerHTML = alertBox;
    document.body.appendChild(mask);
    this.vm();
    document.querySelector("#sure").onclick = function() {
        self.sureFn()
    }
    var canBtn = document.querySelector("#cancel");
    if (canBtn) {
        canBtn.onclick = function() {
            self.cancellFn()
        }
    }
}

alertFn.prototype.vm = function() {
    var box = document.querySelector(".js-alertFn");
    var h = box.offsetHeight;
    var mh = document.querySelector("#mask").offsetHeight;
    box.style.top = (mh - h) / 2 + "px";
}

alertFn.prototype.sureFn = function() {
    this.init();
    this.json.sure && this.json.sure();
}

alertFn.prototype.cancellFn = function() {
    this.init();
    this.json.cancell && this.json.cancell();
}

function selfAlert(json) {
    return new alertFn(json);
}
</script>

以上是关于alert效果的主要内容，如果未能解决你的问题，请参考以下文章

12个用得着的 JQuery 代码片段

ext html片段,ext.html · 潜行的青衣/jquery-ui-ext - Gitee.com

CSS代码片段

setTimeout中所执行函数中的this，永远指向window