支付寶小程序官方提供的alert提示框、dialog對話框、model彈窗功能比較有限，有些都不能隨意自定義修改的。如是自己就捯飭著封裝了個支付寶小程序自定義彈窗插件wcPop，多種展示場景，隨意修改調用。

10年積累的成都網(wǎng)站建設、成都做網(wǎng)站經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先做網(wǎng)站后付款的網(wǎng)站建設流程，更有柯橋免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

自定義的小程序彈窗采用了全新的模板布局，極簡的api調用方式，同時解決了自定義彈窗出現(xiàn)時,蒙層下的頁面仍可以滾動的問題。

在原始功能的基礎上，新增了跟隨定位彈窗、上下左右彈窗、彈窗swipe滑動功能

先來展示部分彈窗demo圖：

在需要調用彈窗插件的頁面引入tpl.js

//信息框
 btnTap03: function(e) {
  var index = wcPop({
   content: '信息框 （這里演示信息框功能效果，這里演示信息框功能效果，這里演示信息框功能效果）',

   shadeClose: true,
   anim: 'rollIn',
   xclose: true,

   btns: [
    {
     text: '知道了',
     style: 'color: #999',
     onTap() {
      wcPop.close(index);
      console.log("知道了");
     }
    }
   ]
  });
 },

 //詢問框
 btnTap04: function(e) {
  wcPop({
   title: '溫馨提示~~~',
   content: '警告，非法操作非法操作非法操作非法操作非法操作非法操作非法操作?。?！',
   shadeClose: false,
   anim: 'shake',

   btns: [
    {
     text: '取消',
     onTap() {
      console.log('您點擊了取消！');
      wcPop.close();
     }
    },
    {
     text: '確定',
     style: 'color:#108ee9;',
     onTap() {
      console.log('您點擊了確定！');
     }
    }
   ]
  });
 },

 //自定義多按鈕
 btnTap05: function(e) {
  wcPop({
   title: '^-^支付是一種態(tài)度',
   content: '尊敬的用戶，我們?yōu)槟峁┝恕艾F(xiàn)金支付”和“微信支付兩種方式”，請選擇一種您的常用支付方式進行支付操作?。。?,
   style: 'border-top:5px solid #108ee9;max-width:90%', //自定義彈窗樣式
   anim: 'fadeInUp',
   opacity: .85,

   btns: [
    {
     text: '微信支付',
     style: 'color:#179b16;',
     onTap() {
      console.log('您選擇了微信支付！');
     }
    },
    {
     text: '支付寶支付',
     style: 'color:#108ee9;',
     onTap() {
      console.log('您選擇了支付寶支付！');
     }
    },
    {
     text: '取消',
     onTap() {
      console.log('您取消了支付請求！');
      wcPop.close();
     }
    }
   ]
  });
 },

 //底部對話框
 btnTap06: function(e) {
  wcPop({
   skin: 'footer',
   content: '確定刪除該條數(shù)據(jù)嗎？刪除后可在7天之內(nèi)恢復數(shù)據(jù)，超過7天后數(shù)據(jù)就無法恢復啦！',
   anim: 'footer',
   shadeClose: false,

   btns: [
    {
     text: '恢復',
     style: 'color:#108ee9;',
     onTap() {
      console.log('您點擊了恢復！');

     }
    },
    {
     text: '刪除',
     style: 'color:#e63d23;',
     onTap() {
      console.log('您點擊了刪除！');

      //刪除回調提示
      wcPop({
       anim: 'fadeIn',
       content: '您點擊了刪除功能',
       shade: true,
       time: 3
      });
     }
    },
    {
     text: '取消',
     onTap() {
      console.log('您點擊了取消！');
      wcPop.close();
     }
    }
   ]
  });
 },

新聞標題：支付寶小程序自定義彈窗dialog插件的實現(xiàn)代碼-創(chuàng)新互聯(lián)
轉載來于：http://weahome.cn/article/ecsop.html