webapp弹层

最新推荐文章于 2022-07-02 16:37:53 发布

wang37972547

最新推荐文章于 2022-07-02 16:37:53 发布

阅读量526

点赞数

分类专栏： javascript 文章标签： zepto弹层 zepto提示框

本文链接：https://blog.csdn.net/wang37972547/article/details/46772441

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

</pre><pre name="code" class="html">/*
* Zepto 1.1.4
*
* wangxianfa
*
* 2015-07-03
*
* */
(function ($) {
    function Popup(option) {

        this.option = $.extend({
            target: $('<div></div>'),
            isFixed: true,
            isMask: true,
            maskClick: false
        }, option || {});

    }

    Popup.prototype = {

        dom: function () {
            return this.option.target;
        },

        show: function (fn) {
            var ml,
                mt;

            if (this.option.isMask) {
                this.option.mask
                    .show()
                    .css({
                        opacity: '.5'
                    });
            }

            this.option.target.show();

            ml = -this.option.target.width() / 2;
            mt = -this.option.target.height() / 2;

            if (this.option.isFixed) {
                this.option.target.css('position', 'fixed');
            } else {
                mt += document.getElementsByTagName('body')[0].scrollTop;

            }
            this.option.target.css({
                marginLeft: ml,
                marginTop: mt
            });

            if (typeof fn === 'function') {
                fn();
            }
        },

        hide: function (fn) {

            this.option.target.hide();
            this.option.mask.hide();

            if (typeof fn === 'function') {
                fn();
            }
        },
        basic: function () {

            var self = this,
                body = $('body');

            this.option.target
                .hide()
                .css({
                    left: '50%',
                    top: '50%',
                    zIndex: 999
                });

            body.append(this.option.target);

            if (this.option.isMask) {
                self.option.mask = $('<div></div>');
                self.option.mask
                    .hide()
                    .addClass('popupMask')
                    .css({
                        left: 0,
                        top: 0,
                        width: '100%',
                        height: '100%',
                        backgroundColor: '#000',
                        zIndex: 998,
                        position: 'fixed'
                    });
                body.append(self.option.mask);
            }

            this.dom().find('*').each(function () {
                if ($(this).attr('data-lightbox') === 'close') {
                    $(this).bind('click', function () {
                        self.hide();
                    })
                }
            });

            if (self.option.maskClick) {
                self.option.mask.on('click', function () {
                    self.hide();
                });
            }
        }
    };

    window.Popup = Popup;

})(Zepto);

实例化

var lightBox = function (){ 
        var lightbox = new Popup({
            target: $('.weixin').clone(),
            isMask: true,
            isFixed: true,
            maskClick: true
        });
        lightbox.basic();

        return {
            show: function(callback) {
                lightbox.show(callback);
            },
            hide: function(callback) {
                lightbox.hide(callback);
            },
            dom: function(){
                return lightbox.dom();
            }
        }
    }();