由于经常会用到一些自定义的弹窗,为避免重复造轮子,所以就写了一个组件的方式。
这个封装功能还不是很全,只能为用户自定义部分内容,后期在继续优化。

这个控件包含一个css文件和一个js文件,注意,该js文件依赖jQuery,所以在使用之前,先把jquer包含进来。

不多少,上代码:

github: https://github.com/xiongxianhe/kingAlert

2017-09-19 第一次更新
css第5行:position: absolute;
改为: position: fixed;

js代码:

/**
 *  version: v1.0
 *  author: echo
 *  email: 360765409@qq.com
 *  time: 2017-09-06
 *  userage:
 *      <script>
             function kingAlert(msg) {
                KingAlert({
                    coverColor: 'rgba(0,0,0,0.36)',
                    title: msg,
                    okFun: function () {

                    },
                    cancelFun: null
                });
            }
         </script>
 * @param paramObj
 * {
 *      coverColor: rgba(0,0,0,0.36),
 *      title: '删除该商品吗?',
 *      okFun: function(){},
 *      cancelFun: function(){}
 * }
 * @constructor
 */
function KingAlert(paramObj) {
    this.coverColor = paramObj.coverColor == null ? 'rgba(0,0,0,0.36)':paramObj.coverColor;
    this.title = paramObj.title == null ? '删除该商品吗?' : paramObj.title;

    this.alertHtml = '<div class="king-alert-contain"><div class="king-alert">\
                        <div class="alert-title">\
                            <span>删除该商品吗2?</span>\
                            <span>X</span>\
                        </div>\
                        <div class="alert-body">\
                            <span class="btn-ok">确定</span>\
                            <span class="btn-cancel">取消</span>\
                            </div>\
                       </div></div>';

    $('body').append(this.alertHtml);
    $('.king-alert-contain').css({display: 'block',backgroundColor: this.coverColor});


    $('.alert-title span:first-child').text(this.title);
    $('.king-alert .alert-body .btn-ok').click(function () {
        if(paramObj.okFun == null) {
            $('.king-alert-contain').remove();
        } else
            paramObj.okFun();

    });
    $('.king-alert .alert-body .btn-cancel').click(function () {
        if(paramObj.cancelFun == null) {
            $('.king-alert-contain').remove();
        } else
            paramObj.cancelFun();
    });
    $('.king-alert .alert-title span:last-child').click(function () {
        if(paramObj.cancelFun == null) {
            $('.king-alert-contain').remove();
        } else
            paramObj.cancelFun();
    });
}

css代码:

.king-alert-contain {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.36);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}
.king-alert {
    width: 35%;
    height: 170px;
    margin: 100px auto;
    border: solid 8px rgb(137,137,137);
    background-color: white;
}
.alert-title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #eaeaea;
    color: #555555;
    overflow: hidden;
    font-size: 16px;
}
.alert-title span:first-child {
    float: left;
    margin-left: 15px;
}
.alert-title span:last-child {
    float: right;
    margin-right: 15px;
    cursor: pointer;
}
.alert-body {
    height: 120px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.btn-ok, .btn-cancel {
    display: inline-block;
    width: 100px;
    height: 33px;
    line-height: 30px;
    background-color: #64a131;
    margin: 0 13px;
    color: white;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}

测试代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义弹窗</title>
    <link href="css/kingAlert.css" rel="stylesheet">
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/kingAlert.js"></script>
</head>
<body>

<button onclick="kingAlert('Hello KingAlert');">CLICK</button>
<script>
function kingAlert(msg) {
    KingAlert({
        coverColor: 'rgba(0,0,0,0.36)',
        title: msg,
        okFun: function () {

        },
        cancelFun: null
    });
}
</script>

</body>
</html>

分类: 前端

1 条评论

huanglu · 2017年9月7日 上午12:07

Very useful

发表评论

电子邮件地址不会被公开。 必填项已用*标注