$(document).ready() Jquery
Ola Galera ,
Hoje eu vou falar um pouco da função ready() , do jquery , mais expecificamente da utilização dela sobre o objeto document ,é muito comum a necessidade de executar determinada ação assim que uma página web é carregada , isso no jquery a gente faz utilizando a função ready sobre o objeto document , e nesse caso a gente passa como argumento uma função , ex :
$(document).ready(alert('ooie'));
Bom então conceitualmente é facil e a ultilização tbm não tem segredos , agora eu vou mostrar um exemplo daqueles que vc entra no site e ele abre um PopUp em jquery que poderia ser uma propaganda ou whatever , no exemplo eu mostrarei uma imagem no popup :
primeiro eu vou criar um div , e vou setar o seu id como ibody e esse div será usado para fazer o overlay da tela quando o popup aparecer o css dele a gente faz mais pra frente :
<div id="ibody" class="modal-overlay" style="visibility: hidden; display: none; " ></div>
Logo abaixo eu vou criar os divs que serão realmente o popup :
<div id="popupMain" style="position: absolute;top: 25%; visibility: hidden; display: none; ">
<div>
<span style=" cursor:pointer;" id="close-popup">
[ X ]
</span>
</div>
<div id="popupMainInner">
<img src="imagem.png" />
</div>
</div>
Nesse código podemos ver que tenho um div mais externo o principal , logo a baixo
tem um div cm id close-popup ontem tem um xizinho bem tosco eu vou usar isso pra fechar o popup
aqui vc poderiam usar uma imagem , um botãozinho .. mas enfim , observe que o proximo div
é o mais interno , é onde eu realmente carrego meu conteúdo , no caso uma tag img, até aqui acho que tudo tranquilo né, nada especial.
O próximo passo é adicionar os css :
.modal-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 2500px;
width: 100%;
margin: 0;
padding: 0;
background: black;
opacity: .75;
filter: alpha(opacity=75);
xmoz-opacity: 0.75;
z-index: 101;
}
#popupMain {
color: white;
position: absolute;
z-index: 103;
}
#popupMainInner{
border: 1px solid #999;
}
Tbm não tem muito oq dizer do css não que não seja importante mas acho que esse css ta bem simples é auto-explicativo.
Agora sim vamos para o código em javascript que vai fazer toda a mágica :
$(document).ready(function(){
AbrirFecharPopUp(true); //abre o popup
$("#close-popup").click(function(event){
event.preventDefault();
AbrirFecharPopUp(false);//fecha o popup
});
});
Então vou usar o document.ready pra chamar uma função que abre meu popup acima eu já prevejo que essa função
terá o nome de AbrirFecharPopUp recebendo um parametro boleano que diz se eu estou abrindo ou fechando o tal popup
logo abaixo eu uso a função click() do jquery pra dizer que quando eu clicar no xizinho eu devo fechar o popup.
Bom agora vamos pra função que vai abrir ou fechar o popup :
function AbrirFecharPopUp(open) {
if (open) {
$("#ibody").show();
$("#popupMain").show();
$("#popupMain").attr("style","position:absolute; top:25%; left:20%;");
document.getElementById('ibody').style.visibility = '';
}
else {
$("#ibody").hide();
$("#popupMain").hide();
}
}
nessa função no caso de open=true , eu mostro o objeto ibody que vai fazer o overlay(aquele fundo preto na tela)
e em seguida mostro o div de popup , e tbm seto alguns atributos dele pra centralizar ele na tela .
no caso de open=false , eu simplesmente desapareço com os dois objetos da tela.
Bom se vc fez tudo corretamente o resultado deve ser como aparece na imagem do inicio do post.
obs : não se esqueçam de adicionar as referencias das APIs de jquery.
até a próxima !
… Whatever , o
