Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

JGD

JQUERY - Alinhamento de janela modal

Recommended Posts

Olá Pessoal,

 

Por favor, uma ajuda com alinhamento modal...

Ocorre o seguinte: Ao abrir a janela via link... Sempre, a primeira vez abre não no centro da tela. Abre um pouco mais abaixo.

Já na segunda vez... Em diante... Abre no centro da tela.

 

Penso que o script não pega de cara as dimensões: $(window).width(), $(window).height(), object.width() e object.height()...

Daí, se minha tese estiver correta. Como posso "setar" tais valores no carregamento inicial da tela? Digo: no jQuery(document).ready ???

Ou algum método parecido.

 

Segue código:

(function ($) {

    $.fn.simplePopup = function (options) {

    var defaults = $.extend({
    }, options);
        
    /******************************
    Private Variables
    *******************************/         
        
    var object = $(this);
    var settings = $.extend(defaults, options);
        
    /******************************
    Public Methods
    *******************************/         
        
    var methods = {

        init: function() {
        return this.each(function () {
            methods.appendHTML();
            methods.setEventHandlers();
            methods.showPopup();
            
            
        });
        },

        /******************************
        Append HTML
        *******************************/            

        appendHTML: function() {

        // if this has already been added we don't need to add it again
        if ($('.simplePopupBackground').length === 0) {
            var background = '<div class="simplePopupBackground"></div>';
            $('body').prepend(background);
        }

        if(object.find('.simplePopupClose').length === 0) {
            var close = '<div class="simplePopupClose">X</div>';
            object.prepend(close);
        }
        },

        /******************************
        Set Event Handlers
        *******************************/            

        setEventHandlers: function() {

        $(".simplePopupClose, .simplePopupBackground").on("click", function (event) {
            methods.hidePopup();
            
            
        });

        $(window).on("resize", function(event){    
            methods.positionPopup();
        });                

        },

        showPopup: function() {
        $(".simplePopupBackground").css({
            "opacity": "0.7"
        });
        $(".simplePopupBackground").fadeIn("fast");
        object.fadeIn("slow");
        methods.positionPopup();
        },

        hidePopup: function() {
        $(".simplePopupBackground").fadeOut("fast");
        object.fadeOut("fast");
        },            

        positionPopup: function() {
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        var popupWidth = object.width();                
        var popupHeight = object.height();
        
        windowWidth = $(window).width();
        windowHeight = $(window).height();
        popupWidth = object.width();                
        popupHeight = object.height();
        

        var topPos = (windowHeight / 2) - (popupHeight / 2);
        var leftPos = (windowWidth / 2) - (popupWidth / 2);
        if(topPos < 30) topPos = 30;
        
        object.css({
            "position": "absolute",
            "top": topPos,
            "left": leftPos
        });
        },            

    };
        
    if (methods[options]) { // $("#element").pluginName('methodName', 'arg1', 'arg2');
        return methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof options === 'object' || !options) {     // $("#element").pluginName({ option: 1, option:2 });
        return methods.init.apply(this);  
    } else {
        $.error( 'Method "' +  method + '" does not exist in simple popup plugin!');
    }
    };

})(jQuery);

Agradeço qualquer ajuda.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.