原生Js彈窗外掛|web彈出層元件|對話方塊
阿新 • • 發佈：2019-01-06
wcPop.js 是一款基於原生javascript開發的前端 web版 彈窗元件，遵循原生 H5/css3/JS 的書寫規範，簡單實用、拿來即用（壓縮後僅10KB）。已經相容各大主流瀏覽器。內含多種彈窗型別（普通型彈窗、仿微信|android|ios彈窗、定位彈窗、全屏彈窗），多種動畫展示效果，可以讓您的網頁對話方塊千變萬化。
◆ 一睹風采
◆ 在頁面只需引入wcPop.js即可：
<script src="wcPop.js"></script>
◆ API呼叫方式極為簡單：
/** ====== 彈窗演示（ 普通型彈窗 ）*/ //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, //設定彈窗自動關閉秒數1、 2、 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;}
wcPop彈窗外掛之前還有開發過移動端版本
https://www.cnblogs.com/xiaoyan2017/p/8695783.html
並且在一些專案中已經有應用，而且相容性挺不錯噠。
https://www.cnblogs.com/xiaoyan2017/p/9266179.html