Ir para conteúdo

POWERED BY:

Arquivado

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

wneo

Modal não está centralizando

Por , em Desenvolvimento frontend

Recommended Posts

wneo    5

wneo
Postado

Boa noite!

Pessoal, toh utilizando uma modal para exibição de imagens miniaturas em tamanho grande ao clicar nelas. O mecanismo está funcionando adequadamente(escurece o fundo e mostra somente o objeto como foco). O problema ocorre quando diminuo o zoom do navegador. O conteudo da modal não fica centralizado.

 

Segue abaixo o código:

<style>
.window{
    display:none;
    width:300px;
    height:300px;
    position:absolute;
    left:0;
    top:0;
    background:#FFF;
    z-index:9900;
    padding:10px;
    border-radius:10px;
}
 
#mascara{
    display:none;
    position:absolute;
text-align:center;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
min-width:100%;
min-height:100%;
}
 
.fechar{display:block; text-align:right;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script>
$(document).ready(function(){
    $("a[rel=modal]").click( function(ev){
        ev.preventDefault();
 
        var id = $(this).attr("href");
 
        var alturaTela = $(document).height();
        var larguraTela = $(window).width();
     
        //colocando o fundo preto
        $('#mascara').css({'width':larguraTela,'height':alturaTela});
        $('#mascara').fadeIn(1000);
        $('#mascara').fadeTo("slow",0.8);
 
        var left = ($(window).width() /2) - ( $(id).width() / 2 );
        var top = ($(window).height() / 2) - ( $(id).height() / 2 );
     
        $(id).css({'top':top,'left':left});
        
$(id).show();  
    });
 
    $("#mascara").click( function(){
        $(this).hide();
        $(".window").hide();
    });
 
    $('.fechar').click(function(ev){
        ev.preventDefault();
        $("#mascara").hide();
        $(".window").hide();
    });
});
</script>

<body>
<a href="#janela1" rel="modal">Janela modal</a>
 
<div class="window" id="janela1">
    <a href="#" class="fechar">X Fechar</a>

    <h4>Primeira janela modaL</h4>
CONTEUDO

</div>
 
 
<!-- mascara para cobrir o site -->  
<div id="mascara"></div>

</body>

Creio q é algo a ser ajustado no CSS, na div .window, ou no proprio script...

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

Você já tentou usar algum plugin jQuery pronto?

Existe o ShadowBox e o FancyBox, ambos fazem a mesma coisa e tem muita configuração já pronta.

As vezes economiza tempo, dá uma olhada :P

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Julião    34

Douglas Julião
Postado

Seu window não está ficando centralizado, porque você está usando position:absolute e (top:0,left:0) direto no body, o que você pode fazer é isso: 

<style>
.content{
    width:300px;
    height:300px;
    position:relative;
    margin:0 auto;
}
.window{
    display:none;
    width:300px;
    height:300px;
    position:absolute;
    left:0;
    top:0;
    background:#FFF;
    z-index:9900;
    padding:10px;
    border-radius:10px;
}

</style>
<body>

 
<div class="content">
    <div class="window" id="janela1">
        <a href="#" class="fechar">X Fechar</a>

        <h4>Primeira janela modaL</h4>
        CONTEUDO

    </div>
</div> 


</body>

Acredito que irá funcionar, :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Julião    34

Douglas Julião
Postado

Talvez seja porque sua mascara esta com position:absolute , tem que tomar um cuidado especial quando você vai utilizar o absolute, pelo que vi você estava usando nas suas 3 divs, tenta alterar o position da mascara para relative.

Boa sorte!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito