Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Centralizar janela em jQuery na página

13-09-2013 15:15

Olá, Kléber!

Partindo deste simples e eficiente código, como posso centralizar a janela que deve aparecer na página após clicar no link?

Por exemplo: se o link fica no rodapé da página, a janela em jQuery aparece na tela, centralizada naquela área.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/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();         });                             });   </script>


<style type="text/css">   #mask {   position:absolute;   left:0;   top:0;   z-index:9000;   background-color:#000;   display:none; }   #boxes .window {   position:absolute;   width:100%;   height:100%;   display:none;   z-index:9999;   padding:20px; }   #boxes #dialog {   width:375px;   height:203px;   padding:10px;   background-color:#ffffff; }   .close{display:block; text-align:right;}   </style>


<li><a href="#dialog" name="modal">Clique aqui</a></li>   <div id="boxes">   <div id="dialog" class="window"> <a href="#" class="close">Fechar [X]</a><br /> Título<br />   Texto </div>     <div id="mask"></div>   </div>

Desde já, agradeço a atenção! ;)
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17663
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Centralizar janela em jQuery na página

13-09-2013 17:00

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado