自定义 alert 弹窗

1.css样式

li-alert.css

@-webkit-keyframes opacity {
    0% {
        opacity: 0; /*初始状态 透明度为0*/
    }
    50% {
        opacity: 0; /*中间状态 透明度为0*/
    }
    100% {
        opacity: 1; /*结尾状态 透明度为1*/
    }
}
.li-opacity {
    -webkit-animation-name: opacity; /*动画名称*/
    -webkit-animation-iteration-count: 1; /*动画次数*/
    -webkit-animation-delay: 0s; /*延迟时间*/
}
.alert-mask {
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0%;
    top: 0%;
    z-index: 9998;
    background-color: rgba(0,0,0,.7);
}
.alert-content {
    position: fixed;
    box-sizing: border-box;
    border-radius: 4px;
    z-index: 9999;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    transition: .4s;
    display: none;
}
.alert-show {
    display: block;
}
.alert-default {
    background-color: white;
}

 

2.弹窗函数封装

li-alert.js

/**
 * 常用的弹框组件
 * @author helijun
 * @return {[]} [depend jquery]
 */
;(function($){
    $.alert = function(opts){
        var defaultOpts = {
                title: '',//标题
                content: '',//内容  文字 || html
                height: 50,//默认屏幕（父级）的50%
                width: 80,//默认屏幕（父级）的80%
                type: 'alert-default',//弹框类型
                effect: 'fadeIn',//出现效果，默认下跌落
                delayTime: 500,//效果延时时间，默认.5s
                autoClose: false,//自动关闭
                autoTime: 2000, //自动关闭时间默认2s
                autoEffect: 'default',//关闭效果
                ok: '确定',
                okCallback: function(){},//确定回调
                cancel: '取消',
                cancelCallback: function(){},//取消回调
                before : function() {
                    console.log('before')
                }, 
                close: function() {
                    console.log('close')
                },
                blankclose: false//空白处点击关闭
            }

        for (i in defaultOpts) {
            if (opts[i] === undefined) {
                opts[i] = defaultOpts[i]
            }
        }

        opts.before && opts.before()

        var alertHtml = [
                '<section class="alert-main" id="alertMain">',
                    '<div class="alert-mask li-opacity" id="alertMask"></div>',
                    '<div class="alert-content '+ opts.type +'" id="alertContent">',
                    opts.content +'</div>',
                '</section>'
            ]

        $('body').append(alertHtml.join(''))

        console.log('alertHtml',alertHtml.join(''))

        var $alertContent = $('#alertContent'),
            $alertMain = $('#alertMain');

        $alertContent.css({
            'height': opts.height + '%',
            'top': (100 - opts.height)/2 + '%',
            'width': opts.width + '%',
            'left': (100 - opts.width)/2 + '%'
        })

        $('.li-opacity').css({
            '-webkit-animation-duration' : opts.delayTime/1000 + 's'
        })

        var effect = {
            'fadeIn': 'top',
            'fadeInStart': '-100%',
            'fadeInValue': (100 - opts.height)/2 + '%',
            'sideLeft': 'left',
            'sideLeftStart': '-100%',
            'sideLeftValue': (100 - opts.width)/2 + '%',
            'scale': '-webkit-transform',
            'scaleStart': 'scale(0)',
            'scaleValue': 'scale(1)',
            'info': '-webkit-transform',
            'infoStart': 'scale(1.2)',
            'infoValue': 'scale(1)'
        }

        setTimeout(function(){
            $alertContent.css(effect[opts.effect],effect[opts.effect + 'Start']).addClass('alert-show')

            setTimeout(function(){
                $alertContent.css(effect[opts.effect], effect[opts.effect + 'Value'])
                opts.close && opts.close()
            },10)
        },opts.delayTime)

        if(opts.blankclose) {
            $('.alert-main :not(.alert-content)').on('click',function(event){
                $alertMain.remove()
                opts.close && opts.close()
                event.stopPropagation()
                event.preventDefault()
            })
        }

        if(opts.autoClose && opts.autoTime > 0) {
            setTimeout(function(){$alertMain.remove()},opts.autoTime)
            opts.close && opts.close()
        }
    }
})(jQuery)

 

3.页面调用

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <!-- 视口，屏幕的宽度1：1，不允许缩放 -->
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    
    <!--  浏览器不缓存，每次都去服务器拉取 -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
	
	<!-- 不自动识别手机号码 -->
    <meta name="format-detection" content="telephone=no" >
    
    <title>测试弹框组件</title>
    	
    <link rel="stylesheet" type="text/css" href="css/li-alert.css">
</head>
<body>
   <p class="alert" data-flag="fadeIn">fadeIn</p>
   <p class="alert" data-flag="sideLeft">sideLeft</p>
   <p class="alert" data-flag="scale">scale</p>
   <p class="alert" data-flag="info">info</p>
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/li-alert.js"></script>
<script>
    $('.alert').on('click',function(event){
    	var txt = "hello World";
        $.alert({
            content: '<h1 style="display:flex;justify-content:center;">我是弹框</h1>' + '<p>' + txt +'</p>',
            effect: $(event.currentTarget).attr('data-flag'),
            blankclose: true,
            //autoClose: true
        })
    });
</script>
</html>

.