原生Js彈窗插件|web彈出層組件|對話框

時間 2019-11-11

原文原文鏈接

wcPop.js 是一款基於原生javascript開發的前端 web版彈窗組件，遵循原生 H5/css3/JS 的書寫規範，簡單實用、拿來即用（壓縮後僅10KB）。已經兼容各大主流瀏覽器。內含多種彈窗類型（普通型彈窗、仿微信|android|ios彈窗、定位彈窗、全屏彈窗），多種動畫展現效果，能夠讓您的網頁對話框變幻無窮。javascript

◆ 一睹風采css

◆ 在頁面只需引入wcPop.js便可：html

◆ API調用方式極爲簡單：java

/** ====== 彈窗演示（ 普通型彈窗 ）*/
//msg提示
btn_click1_01 = function(){
    wcPop({
        anim: 'fadeIn',
        content: '這裏是msg提示框測試（5s後窗口關閉）',
        shadeClose: false,
        time: 5
    });
}

//msg提示（自定義背景）
btn_click1_02 = function(){
    wcPop({
        anim: 'fadeIn',
        content: 'msg提示（自定義背景）',
        style: 'background:rgba(25,175,25,.7);color:#fff;text-align:center;',
        shadeClose: true,
        area: "300px",
        xclose: true,
        time: 5
    });
}

//信息框
btn_click1_03 = function(){
    var index03 = wcPop({
        content: '信息框 （這裏演示信息框功能效果，這裏演示信息框功能效果，這裏演示信息框功能效果） <br><br> 可自定義彈窗高度 <br>自定義拖拽區域',
        
        shadeClose: true,
        xclose: true,
        area: ["", "100px"],
        resize: true,
        drag: '.popui__panel-main',
        
        btns: [
            {
                text: '知道了',
                style: 'color: #999',
                onTap: function() {
                    console.log("知道了");
                    wcPop.close(index03);
                }
            }
        ]
    });
}

//詢問框
btn_click1_04 = function(){
    var index04 = wcPop({
        anim: 'fadeInUpBig',
        title: '標題提示',
        content: '詢問框彈窗演示，詢問框彈窗演示，詢問框彈窗演示，詢問框彈窗演示，詢問框彈窗演示詢問框彈窗演示，詢問框彈窗演示，詢問框彈窗演示，詢問框彈窗演示，詢問框彈窗演示詢問框彈窗演示，詢問框彈窗演示，詢問框彈窗演示，詢問框彈窗演示，詢問框彈窗演示<br>詢問框彈窗演示，詢問框彈窗演示，詢問框彈窗演示，詢問框彈窗演示，詢問框彈窗演示<br><br> 可自定義彈窗寬高',
        shadeClose: false,
        xclose: true,
        maxmin: true,
        area: ["500px", "200px"],
        
        resize: true,
        
        btns: [
            {
                text: '取消',
                onTap: function() {
                    console.log('您點擊了取消！');
                    wcPop.close(index04);
                }
            },
            {
                text: '肯定',
                onTap: function() {
                    console.log('您點擊了肯定！');
                }
            }
        ]
    });
}

//自定義多按鈕
btn_click1_05 = function(){
    wcPop({
        title: '^-^支付是一種態度',
        content: '尊敬的用戶，咱們爲您提供了「現金支付」和「微信支付兩種方式」，請選擇一種您的經常使用支付方式進行支付操做！！！',
        anim: 'fadeInUp',
        fixed: false,
        maxmin: true,
        drag: false,
        
        btns: [
            {
                text: '微信支付',
                style: 'color:#1aad19;',
                onTap: function() {
                    console.log('您選擇了微信支付！');
                }
            },
            {
                text: '支付寶支付',
                style: 'color:#108eff;',
                onTap: function() {
                    console.log('您選擇了支付寶支付！');
                }
            },
            {
                text: '取消',
                onTap: function() {
                    console.log('您點擊了取消！');
                    wcPop.closeAll();
                }
            }
        ]
    });
}

//actionSheet彈出式菜單
btn_click1_06 = function(){
    wcPop({
        skin: 'actionsheet',
        content: '<span style="color:#aaa;">彈窗內容，告知當前狀態、信息和解決方法，描述文字儘可能控制在三行內</span>',
        anim: 'footer',
        shadeClose: true,
        
        btns: [
            {
                text: '拍照',
                style: 'color:#4eca33;',
                onTap: function() {
                    console.log('拍照');
                    
                    //刪除回調提示
                    wcPop({
                        anim: 'fadeIn',
                        content: '您點擊了拍照',
                        shade: true,
                        time: 3
                    });
                }
            },
            {
                text: '從手機相冊選擇',
                style: 'color:#808080;'
            },
            {
                text: '保存圖片',
                style: 'color:#e63d23;'
            },
            {
                text: '取消',
                onTap: function() {
                    console.log('您點擊了取消！');
                    wcPop.close();
                }
            }
        ]
    });
}

//actionSheet（仿微信picker）
btn_click1_07 = function(){
    wcPop({
        skin: 'actionsheetPicker',
        title: '選擇支付方式',
        content: '<span style="color:#aaa;">這是一個底部自定義頁面層。這是一個底部自定義頁面層。這是一個底部自定義頁面層。這是一個底部自定義頁面層。這是一個底部自定義頁面層。這是一個底部自定義頁面層。這是一個底部自定義頁面層。這是一個底部自定義頁面層。這是一個底部自定義頁面層。這是一個底部自定義頁面層。</span>',
        anim: 'footer',
        shadeClose: true,
        resize: true,
        
        btns: [
            {
                text: '取消',
                onTap: function() {
                    console.log('您點擊了取消！');
                    wcPop.close();
                }
            },
            {
                text: '肯定',
                style: 'color:#4eca33;',
                onTap: function() {
                    console.log('您點擊了肯定！');
                    //回調函數
                    wcPop({anim: 'fadeIn',content: '您點擊了肯定！',time: 3, position: 'bottom'});
                }
            }
        ]
    });
}

//Toast演示
btn_click1_08 = function(){
    wcPop({
        id: 'xwToast',
        skin: 'toast',
        content: '數據加載中...',
        icon: 'loading', //success | info | error | loading
        shade: false,
        time: 3
    });
}

wcPop = function(options){
    var _this = this,
        config = {
            id: 'wcPop',                //彈窗ID標識 (不一樣ID對應不一樣彈窗)
            title: '',                    //標題
            content: '',                //內容
            style: '',                    //自定彈窗樣式
            padding: '',                //彈窗內容區內邊距
            skin: '',                    //自定彈窗顯示風格  toast(Toast提示)、actionsheet|actionsheetPicker(底部彈出式菜單)、ios|android|androidSheet(仿微信樣式) 、contextmenu(右鍵菜單) 、fullscreen(全屏)
            icon: '',                    //彈窗小圖標(success | info | error | loading)
            
            shade: true,                //是否顯示遮罩層
            shadeClose: true,            //是否點擊遮罩時關閉層
            opacity: .6,                //遮罩層透明度
            xclose: false,                //自定義關閉按鈕(默認右上角)
            maxmin: false,                //彈窗最大化
            area: 'auto',                //彈窗寬高 默認'auto'，只定義寬度area:'600px' 定義寬高area:['600px','250px']
            maxWidth: 320,                //最大寬度 只有當area:'auto' maxWidth設定纔有效
            
            anim: 'scaleIn',            //scaleIn：縮放打開(默認)  fadeIn：漸變打開  fadeInUpBig：由下向上打開 fadeInDownBig：由上向下打開  rollIn：左側翻轉打開  shake：震動  footer：底部向上彈出
            follow: null,                //跟隨定位（適用於在點擊位置定位彈窗）
            time: 0,                    //設置彈窗自動關閉秒數一、 二、 3
            zIndex: 9999,                //設置元素層疊
            
            fixed: true,                //是否固定
            resize: false,                //是否容許拉伸
            drag: '.popui__panel-tit',    //拖拽元素(可單獨定義    drag:false禁止拖拽)
            dragOut: true,                //窗體是否能夠拖出
            dragEnd: null,                //拖動完畢後回調函數
            
            btnStyle: '',                //自定按鈕層樣式
            btns: null                    //不設置則不顯示按鈕，btn參數: [{按鈕1配置}, {按鈕2配置}]
        };
    
    _this.opts = util.extend(options, config);
    _this.init();
};

html.html__overflow{overflow-y: hidden; touch-action:none;}

.wcPop *{font-style: normal; font-weight: normal; list-style: none;}
.popui__panel-mask {background: black;opacity: .6;pointer-events: auto;height: 100%;_height:expression(document.body.offsetHeight+"px");width: 100%;position: fixed;top: 0;left: 0;animation: mask-fadeIn .5s;}
@keyframes mask-fadeIn {0% {opacity: 0;}}
.popui__panel-main{background-color:#fff;border-radius:2px;box-shadow:1px 1px 30px rgba(0,0,0,.2); font-size:14px; /*font-family: Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;*/ font-family: 宋體,helvetica,arial,sans-serif; pointer-events: auto; position: fixed; left: 0; top: 0;}
/*標題*/
.popui__panel-tit{background:#f9f9f9; border-bottom:1px solid #eee; border-radius:2px 2px 0 0; color:#1f1f1f; font-size: 14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding: 0 60px 0 20px; height:40px; line-height:40px; -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; user-select:none;}
/*內容*/
.popui__panel-cnt{overflow-x:hidden; overflow-y:auto;padding: 20px; line-height: 1.3; word-wrap: break-word; word-break: break-all; min-width:200px; position:relative;}
/*自定義滾動條樣式*/
.wcPop ::-webkit-scrollbar {height:6px;width:6px;}
.wcPop ::-webkit-scrollbar-track {background: transparent;}
.wcPop ::-webkit-scrollbar-track-piece {background: transparent;}
.wcPop ::-webkit-scrollbar-thumb {background:rgba(0,0,0,.25);border-radius:20px;min-height:15px;width:6px; transition:all .3s;}
.wcPop ::-webkit-scrollbar-thumb:hover {background:rgba(0,0,0,.35);}
.wcPop ::-webkit-scrollbar-thumb:active {background:rgba(0,0,0,.45);}
/*按鈕*/
.popui__panel-btn{
    display: flex; align-items: center; line-height: 40px; position: relative;
    -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; user-select:none;
}
.popui__panel-btn:after{content: ''; border-top: 1px solid #d5d5d5; color:#d5d5d5; height:1px; position: absolute; left: 0; right: 0; top: 0; z-index:95; transform:scaleY(.5);-webkit-transform:scaleY(.5);transform-origin:0 0;-webkit-transform-origin:0 0;}
.popui__panel-btn .btn{color:#1f1f1f;cursor: pointer; display: block; flex: 1; font-size: 14px; text-align: center; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative; z-index: 90; transition:background .3s;}
.popui__panel-btn .btn:active{background: #eee;}
.popui__panel-btn .btn:after{content:"";border-left:1px solid #d5d5d5;color:#d5d5d5; width:1px; position:absolute;top:0;bottom:0;left:0; transform:scaleX(.5);-webkit-transform:scaleX(.5);transform-origin:0 0;-webkit-transform-origin:0 0;}
.popui__panel-btn .btn:first-child:after{display:none;}
.popui__panel-btn .btn:first-child{border-bottom-left-radius: 2px;}
.popui__panel-btn .btn:last-child{border-bottom-right-radius: 2px;}