原创弹出层插件,支持各类型内容,支持回调函数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection"content="telephone=no, email=no" />
    <title>原创弹出层插件,支持各类型内容,支持回调函数</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <style type="text/css">
    *{margin:0;padding:0;}
    body{font-size:16px;color:#333;}
    .ev{padding: 10px; background: #ddd; margin-bottom: 10px;}
    .viewPager{min-width:320px; max-width:720px; margin:0 auto;}
    .panelBox{position:fixed; top:45%;left:50%;width:90%;min-width:280px;max-width:720px;background:#fff; border:1px solid #eee; box-shadow:0 0 50px rgba(0,0,0,0.1);border-radius:5px;min-height:200px;}
    .panelBox .hd{height:40px; border-bottom:1px solid #ddd; line-height:40px; padding:0 10px; background:#eee}
    .panelBox .bd{padding:10px; min-height:100px;}
    .panelBox .ft{height:30px; border-top:1px solid #ddd;padding:5px 10px; background:#eee;}
    .panelBox .ft{text-align:right;}
    .panelBox .ft span{display:inline-block; width:90px;height:30px; line-height:30px; text-align:center; margin-left:15px; border-radius:5px; color:#fff; cursor:pointer;}
    .panelBox .ft .btnCallback{background:#f60;}
    .panelBox .ft .btnCancel{background:#999;}
    .bounceIn{-webkit-animation:bounceIn .2s .2s ease both;animation:bounceIn .2s .2s ease both;}
    @-webkit-keyframes bounceIn{
        0%{opacity:0;-webkit-transform:scale(.9)}
        100%{opacity:1;-webkit-transform:scale(1)}
    }
    @keyframes bounceIn{
        0%{opacity:0;transform:scale(.9)}
        100%{opacity:1;transform:scale(1)}
    }

    .bounceOut{-webkit-animation:bounceOut .2s ease both;animation:bounceOut .2s ease both;}
    @-webkit-keyframes bounceOut{
        0%{-webkit-transform:scale(1)}
        100%{opacity:0;-webkit-transform:scale(.9)}
    }
    @keyframes bounceOut{
        0%{-webkit-transform:scale(1)}
        100%{opacity:0;-webkit-transform:scale(.9)}
    }
    </style>
    <script type="text/javascript">
    ;(function($) {
        $.extend({
            panel :{
                defaults :{
                    'root'          : 'body',
                    'title'         : 'title',
                    'type'          : 'txt',
                    'content'       : '',
                    'hasHd'         : true,
                    'opacity'       : 0.3,
                    'maskBackground': '#000',
                    'callback'      : function(){}
                },

                config :function(ops){
                    this.options = $.extend({},this.defaults, ops);
                },

                tmp :function(im){
                    return im.options.hasHd ? 
                        '<div id="panelBox" class="panelBox">'
                        +       '<div class="hd">'+im.options.title+'</div>'
                        +       '<div class="bd">'+im.options.content+'</div>'
                        +       '<div class="ft"><span class="btnCallback">确定</span><span class="btnCancel">取消</span></div>'
                        + '</div>' :
                        '<div id="panelBox" class="panelBox" style="width:'+im.options.width+'">'
                        +       '<div class="bd"></div>'
                        +       '<div class="ft"><span class="btnCallback">确定</span><span class="btnCancel">取消</span></div>'
                        + '</div>'
                },

                mask :function(im){
                    return '<div id="panelMask" class="mask" style="width:100%;height:100%;position:fixed;top:0;left:0;opacity:0;-webkit-transition:all .2s ease-in;transition:all .2s ease-in;background:'+im.options.maskBackground+';"></div>'
                },

                creat :function(){
                    var _this = this;
                    $(this.options.root).append(this.mask(this));
                    $(this.options.root).append(this.tmp(this));
                    this.oDialog = $('#panelBox');
                    this.oMask = $('#panelMask');
                    this.oCon = $('.bd',this.oDialog);
                    this.okBtn = $('.btnCallback',this.oDialog);
                    this.cancelBtn = $('.btnCancel',this.oDialog);
                    this.setpos();
                    switch(this.options.type){
                        case 'txt':
                            this.oCon.html(this.options.content);
                            break;
                        case 'url':
                            this.oCon.html('Loading......');
                            $.get(this.options.content,function(html){
                                _this.oCon.html(html);
                            });
                            break;
                        case 'selecter':
                            this.oCon.html($(_this.options.content).html());
                            break;
                        case 'iframe':
                            this.oCon.html('<iframe width="100%" height="200" src="'+this.options.content+'" scrolling="auto" frameborder="0"><iframe>');
                            break;
                        default:
                            this.oCon.html(this.options.content);
                            break;
                    }
                },

                show :function(){
                    this.creat();
                    var _this = this;
                    setTimeout(function(){
                        _this.oMask.css('opacity',_this.options.opacity);
                    },10);
                    this.oDialog.addClass('bounceIn');
                    this.bindEve();
                },

                hide :function(){
                    var _this = this;
                    this.oMask.css('opacity',0);
                    this.oDialog.removeClass('bounceIn').addClass('bounceOut');
                    setTimeout(function(){
                        _this.oMask.remove();
                        _this.oDialog.remove();
                    },200);
                },

                bindEve :function(){
                    var _this = this;
                    this.oMask.bind('click',function(){
                        _this.hide();
                    });

                    this.okBtn.bind('click',function(){
                        _this.options.callback();
                        _this.hide();
                    });

                    this.cancelBtn.bind('click',function(){
                        _this.hide();
                    });

                    $(window).resize(function(){
                        _this.setpos();
                    })
                },

                setpos :function(){
                    var ml = parseInt(this.oDialog.width()/2),
                        mt = parseInt(this.oDialog.height()/2);
                    this.oDialog.css({'margin-left':-ml+'px','margin-top':-mt+'px'});
                }
            },

            dialog:function(ops) {
                $.panel.config(ops);
                return $.panel.show(ops);
            }
        })
    })(jQuery);

    $(function(){
        //调用
        var html = '<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>';
        $('#evtag1').bind('click',function(){
            $.dialog({
                'title'         :'测试title',
                'type'          :'txt',
                'content'       :html,
                'callback'      :function(){
                    console.log('回调函数执行');
                }
            })
        });

        $('#evtag2').bind('click',function(){
            $.dialog({
                'title'         :'测试title',
                'type'          :'selecter',
                'content'       :'#dialogContent',
                'callback'      :function(){
                    console.log('回调函数执行');
                }
            })
        });

        $('#evtag3').bind('click',function(){
            $.dialog({
                'title'         :'测试title',
                'type'          :'iframe',
                'content'       :'http://www.baidu.com/',
                'callback'      :function(){
                    console.log('回调函数执行');
                }
            })
        })

        $('#evtag4').bind('click',function(){
            $.dialog({
                'title'         :'测试title',
                'type'          :'url',
                'content'       :'http://www.baidu.com/',
                'callback'      :function(){
                    console.log('回调函数执行');
                }
            })
        });
    })
    </script>
</head>
<body>
    <div class="viewPager">
        <p class="ev" id="evtag1">弹出-文本</p>
        <p class="ev" id="evtag2">弹出-选择器</p>
        <p class="ev" id="evtag3">弹出-iframe</p>
        <p class="ev" id="evtag4">弹出-url</p>
        <div id="dialogContent">选择器内容</div>
    </div>
</body>
</html>

 

posted on 2015-05-13 16:04  老胡子  阅读(160)  评论(0编辑  收藏  举报