自定義 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>

.