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地址