APICloud 自定義彈窗實現

  在你們的項目裏應該會出現一些彈窗選擇，你可能用了 confirm、prompt，也可能用了 dialogBox，使用這些模塊老是不錯的，但也許其樣式知足不了你的需求。 在這我給你們分享一個簡單的彈窗實現，主要利用 frame 實現。

  先上個效果圖：

  點擊遮照部位能夠關閉彈窗。

  這個實現起來很是簡單，總共就兩個步驟：   第一步：打開一個全屏的 frame，並設置半透明

api.openFrame({
                name: 'dialog',
                url: './html/dialog.html',
                rect: {
                        x:0,
                        y:0,
                        w:api.winWidth,
                        h:api.winHeight
                },
                bgColor: 'rgba(0,0,0,0.6)',
                        bounces: false
        });
複製代碼

  第二步：在打開的 frame 裏，設置一個白底的 div，裏面能夠自定義任何你想要的東西，好比 alert 的肯定按鈕什麼的。   下面的 js 代碼主要實現點擊 div 外，將彈窗關閉的效果：

$('#dialog').addClass('in');
        apiready = function(){
                $(document.body).on('touchend',function(e){
                        var dialog = $("#dialog")[0];
                        if(!$.contains(dialog, e.target)){
                                $('#dialog').removeClass('in');
                                setTimeout(function(){
                                        api.closeFrame();
                                },200);
                        }
                });
        };
複製代碼

  這裏監聽了 touchend 事件，而後判斷了點擊的區域是後在 div 內，不在就closeframe。各位看官能夠根據本身需求，選擇加不加監聽，也能夠控制遮照的透明度。

Demo地址