Entendendo js
olá, pesquisei na internet um código para acionar pop ups com js de modo que eu pudesse controlar as informações do pop up. Consegui o que eu queria com este código:
<html>
<head>
<title>Janela modal</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a[rel=modal]").click( function(ev){
ev.preventDefault();
//alterado
var id = '.window';
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});
//inserido
href = $(this).attr("href");
$('.window').load(href);
$(id).show();
});
$("#mascara").click( function(){
$(this).hide();
$(".window").hide();
});
$('.fechar').click(function(ev){
ev.preventDefault();
$("#mascara").hide();
$(".window").hide();
});
});
</script>
<style type="text/css">
.window{
display:none;
width:300px;
height:300px;
position:absolute;
left:0;
top:0;
background:#FFF;
z-index:9900;
padding:10px;
border-radius:10px;
}
#mascara{
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
.fechar{display:block; text-align:right;}
</style>
</head>
<body>
<a href="form.php" rel="modal">Janela modal</a>
<a href="texto.php" rel="modal">Janela 2 modal</a>
<div class="window" id="janela1">
</div>
<!-- mascara para cobrir o site -->
<div id="mascara"></div>
</body>
</html>O problema é que não entendi como o javascript funciona. Vejo onde começam os processos e onde estão as funções e o que elas fazem, só que não entendo a sintaxe de javascript. Se alguém entendido de js puder me dar uma mão com comentários agradeço.
Discussão (1)
Carregando comentários...