pop.js

if (/^u/.test(typeof define)) {
    this.W360 = this.W360 || {};
    this['define'] = function (name, func) {
        this.W360[name] || (this.W360[name] = func());
    };
    this['require'] = function (name) {
        return this.W360[name];
    };
}
 
define('Pop',function(){
    var Pop = {
        content : null ,
        zIndex: '9999',

        init : function(config){
            var _this = this ,delay;

            this.content = config.content;
            this.render();
            this.setPosition();
            this.show();

            $(window).on('resize',function () {
                delay && clearTimeout(delay);
                delay = setTimeout(function () {
                    if(_this.panel&&_this.panel.length){
                        _this.setPosition();
                    }
                }, 20);
            });

            $(window).on('scroll',function () {
                delay && clearTimeout(delay);
                delay = setTimeout(function () {
                    if(_this.panel&&_this.panel.length){
                        _this.setPosition();
                    }
                }, 20);
            });

            this.bindEvent();
        },

        bindEvent : function(){
            this.panel.on('click','.wan_360layer_close',jQuery.proxy(this,'close'));
            this.panel.on('click','.btn_close',jQuery.proxy(this,'close'));
            this.panel.on('click','.has_action',jQuery.proxy(this,'action'));
        },

        render : function(){
            var _height = Math.max($(document).height(), $(window).height());

            var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest;

            this.mask = jQuery('<div/>').css({'display': 'none', 'position': 'absolute', 'top': '0', 'left': '0', 'width': '100%', 'opacity': '0.5', 'zIndex': this.zIndex-1, 'backgroundColor': '#000', 'height': _height});

            if(isIE6){
                this.$mask.append(jQuery('<iframe src="javascript:false" width="100%" height="100%" style="position:absolute;width:100%;height:100%;filter:Alpha(opacity=0);z-index:'+(this.zIndex - 1)+'"></iframe>'));
            }

            this.panel = jQuery('<div class="wan_360layer cj_layer">\
                                    <div class="layer_top"><div class="layer_top_r"></div></div>\
                                    <div class="layer_conn">\
                                        <div class="layer_conn_bor">\
                                            <div class="layer_conn_show">\
                                                <a title="关闭" class="wan_360layer_close" href="#"><em></em></a>\
                                                <div class="cj_infoconn">\
                                                </div>\
                                                <a href="#" class="cj_layer_btn has_action" data-url="http://www.baidu.com">确定</a>\
                                            </div>\
                                        </div>\
                                    </div>\
                                </div>');

            this.panel.find('.cj_infoconn').append(this.content);
  
            $(document.body).append(this.panel).append(this.mask);

            return this;
        },

        //显示位置
        setPosition : function (event){
            var scrollHeight = $(document).scrollTop(),//获取当前窗口距离页面顶部高度
                windowHeight = $(window).height(),//获取当前窗口高度
                windowWidth = $(window).width(),//获取当前窗口宽度
                popupHeight = this.panel.height(),//获取弹出层高度
                popupWidth =  this.panel.width(),//获取弹出层宽度
                mtop = (windowHeight - popupHeight) / 2 + scrollHeight,
                left = (windowWidth - popupWidth) / 2;

            this.panel.css({'position': 'absolute','top': mtop +'px', 'left': left +'px','zIndex':this.zIndex});
            return this;
        },

        //显示
        show : function (event){
            this.mask.fadeIn('fast');

            this.panel.show();
            return this;
        },

        action: function (event) {
            var url = $(event.currentTarget).data("url");

            this.mask.fadeOut('fast');

            this.panel.hide();

            window.open(url);

            event.preventDefault();

            //this.trigger('action', $(event.currentTarget).data());
            return this;
        },

        //关闭
        close : function (event){
            this.mask.fadeOut('fast');
            this.panel.hide();
            event.preventDefault();
            return this;
        }
    };

    return Pop;   
});


/* 调用方法一:
var pop = require('Pop');
pop.init({"content":"1212121"});*/

/* 调用方法二:*/
var pop = W360['Pop'];
pop.init({"content":"<strong>1212121</strong><p>您的激活码可在下次活动中继续使用!</p>"});
posted @ 2013-12-08 01:14  huengs  阅读(360)  评论(0)    收藏  举报