自定义 alert 弹窗

亦凉 2022-03-28 14:12 301阅读 0赞

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">
        
        
        <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>