Ir para conteúdo

Arquivado

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

mruoppolo

Modal abrir no lugar certo

Recommended Posts

E ia galera tudo bem??

 

Eu estou criando um site onepage e preciso que quando o usuário role a página até o blog e clique em uma postagem a mesma se abra na janela modal, porém, estou tendo problema com isso, pois o modal abre, porém ele abre la em cima no topo, então o usuário não consegue ver o modal, o código é este:

 

Javascript:

$(document).ready(function() {	

	$('a[name=modal]').click(function(e) {
		e.preventDefault();
		
		var id = $(this).attr('href');
	
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		$('#mask').css({'width':maskWidth,'height':maskHeight});

		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
              
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	
		$(id).fadeIn(2000); 
	
	});
	
	$('.window .close').click(function (e) {
		e.preventDefault();
		
		$('#mask').hide();
		$('.window').hide();
	});		
	
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
	
});

Eu ja percebi que é esta linha aqui:

$(id).css('top',  winH/2-$(id).height()/2);

Alguém sabe como posso fazer para o site pegar o height do lugar onde esta aparecendo na tela??

 

Valew ;)

Compartilhar este post


Link para o post
Compartilhar em outros sites
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog {
  width:375px; 
  height:203px;
  padding:10px;
  background-color:#ffffff;
  color:#000;
}

.close{display:block; text-align:right; color:#000;}
.close:hover{display:block; text-align:right; color:#000;}

Esta aqui

Compartilhar este post


Link para o post
Compartilhar em outros sites

você está setando a masK

esquerda 0 = colado na lateral

altura 0 = colado no topo.

certo vai preencher a página

 

vecê está setando o box igualmente.

vai colocar ele colado na lateral e no topo.

 

Deu uma olhada naquele link?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu olhei, mas o código parece idêntico, eu tirei os top e height, mas continua abrindo exatamente no centro da parte de cima do template, se a pessoa ja rolou a página ele não abre na parte do inicio da pagina, ou seja, o usuário tem que rolar a página para cima novamente para ver.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então, eu coloquei da seguinte forma:

               <!-- código modal -->
		<div id="boxes">
			<div id="dialog" class="window">
				<a href="#" class="close">Fechar [X]</a><br />
				Janela Modal Simples<br />  
				Aqui vai o conteúdo da sua Janela Modal Simples.
			</div>
		</div><!--boxes-->
		<!-- fim do código modal -->

Exatamente acima do fechamento da tag body, no caso o template ja tinha uma div mask que esta logo após a abertura da tag body

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.