實現自定義彈窗（網頁+小程式）
阿新 • • 發佈：2019-02-19
這是應用開發過程中，會經常用到的一種效果，ApiCloud的話可以用dialogBox模組來實現，但是裡面的效果也就固定的那幾種，萬一都不符合需求的樣式呢？這就需要通過另一種方式來達到這種彈窗的效果，就是利用openFrame來實現，這樣的話，裡面的佈局樣式想怎麼搞就怎麼搞，搞出花兒來都行！！具體程式碼如下，裡面有詳細註釋，不過多解釋。先看一下效果圖（樣式很醜！低調低調~~~，主要就是看功能的實現）：
api.openFrame({ name: 'dialog_frame', url: './dialog_frame.html', rect: { x: 0, y: 0, w: 'auto', h: 'auto' }, pageParam: { name: 'test' }, bgColor: 'rgba(0,0,0,0.4)',//設定一下透明度 vScrollBarEnabled: false, hScrollBarEnabled: true });
然後彈窗的body整體透明，樣式：
<style> html, body { height: 100%; background: transparent } .container { display: -webkit-flex; display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; } .content { width: 80%; height: 100px; background: #fff; border-radius: 5px; } </style>
<body> <div class="container"> <div class="content"> <div class="d_title">溫馨提示</div> <div class="d_content">彈窗的內容</div> <div style="height:1px;background:#000"></div> <div class="d_confirm" onclick="api.closeFrame()" tapmode>確定</div> </div> </div> </body>
//實現點選彈窗外圍也讓彈窗消失（用到的jquery，自行引入）
function initEventListener() {
$(document.body).on('touchend', function(e) {
var dialog = $(".container")[0];
if (!$.contains(dialog, e.target)) {
setTimeout(function() {
api.closeFrame();
}, 50);
}
});
}
下面看一下小程式的效果圖，這是我一個專案中的效果
這種彈窗，用wx.showModal這種模態框肯定是實現不了的，彈窗的佈局可能千變萬化，所以只能自定義,下面看程式碼。
佈局：其實彈窗佈局也是在這個拍照頁面佈局裡，只不過是一開始隱藏了而已，必要的時候再顯示。
<view class='dialog_container' hidden='{{flag}}' catchtouchmove='true'>
<view>
<view class='dialog_title'>交管小貼士</view>
<view class='content1'>請在拍照前開啟危險報警閃光燈，設定三角警示牌，拍照時注意交通安全。</view>
<view class='content2'>點選圖例相機可以進行現場拍照，也可以從手機相機中提取已拍攝的現場照片，圖片至少3張，最多6張。</view>
<view class='btn_confirm' bindtap='dialog_confirm'>確定</view>
</view>
</view>
hidden：就是事先用來控制顯示隱藏的
catchtouchmove='true' 當彈窗出現時，禁止浮層下頁面的滑動，不設定的話，頁面依然可以滾動
下面看樣式：
.dialog_container {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
padding-left: 50px;
padding-right: 50px;
margin: auto;
background: rgba(0, 0, 0, 0.2);
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
}
.dialog_title {
height: 40px;
background: #2c66a8;
line-height: 40px;
text-align: center;
color: white;
font-size: 18px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.content1 {
background: #fff;
color: red;
padding: 4px;
}
.content2 {
background: #fff;
color: #000;
padding: 4px;
}
.btn_confirm {
height: 40px;
line-height: 40px;
background: #f4f4f4;
color: #2c66a8;
text-align: center;
font-size: 16px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
搞定！順便說一下，如果你的彈窗裡有textarea這種文字輸入框，需要給textarea再單獨加一個fixed='true'的屬性，不然滑動textarea區域，依然會滾動起整個頁面。我也是查了微信小程式的api之後才知道的，當時就掉整個坑裡了。就是因為彈窗的外層佈局設定了position:fixed屬性。ok，採坑完畢。