Ir para conteúdo

POWERED BY:

Arquivado

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

anneviana

janela modal abertura automatica

Por , em Javascript

Recommended Posts

anneviana    0

anneviana
Postado

Olá amigos,

Tenho um projeto que preciso de uma janela modal em jquery que abra automatica,eu já tenho o codigo dela ativando quando clica,mas gostaria que ela funcionasse quando é aberta a página.

Se alguém souber, sou super novata em jquery.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

dispare a abertura no document.ready

só isso.

 

vou mover teu topico para javascript.

Compartilhar este post

Link para o post
Compartilhar em outros sites

anneviana    0

anneviana
Postado

Então tu poderia me dizer como faço isso ?

coloquei window.open e nao funcionou ou melhor nem sei se coloquei certo!

:/

Compartilhar este post

Link para o post
Compartilhar em outros sites

anneviana    0

anneviana
Postado

meu código é esse:

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery Modal Window</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[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">
body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
 position:absolute;
 left:0;
 top:0;
 z-index:9000;
 display:none;
background-color:#000;
}

#boxes .window {
 position:absolute;
 left:0;
 top:0;
 width:440px;
 height:200px;
 display:none;
 z-index:9999;
 padding:20px;
 margin:10px 0 0 0px
}

element.style {
   display: block;
   left: 200px;
   top: 213.5px;
}
#boxes #dialog {
   background-image: url("fundo_login.png");
   height: 350px;
   padding: 10px;
   width: 869px;
}

input {
   border: medium none;
   float: left;
   font-size: 16px;
   height: 10px;
   left: 9px;
   margin-top: 15px;
   padding: 5px;
   position: relative;
   top: -10px;
   width: 150px;
}

.checkbox {
   float: left;
   margin: 14px 24px;
   text-align: left;
}

#form {
   float: left;
   height: 200px;
   padding-left: 131px;
   padding-top: 76px;
   width: 300px;
}

#dialog1 .d-blank {
 float:left;
 background:url(login-blank.png) no-repeat 0 0 transparent; 
 width:267px; 
 height:53px;
}

.d-login {
   height: 53px;
   width: 108px;
}

.submit {
   height: 26px;
   margin-top: -5px;
   width: 172px;
}

#boxes #dialog2 {
 background:url(notice.png) no-repeat 0 0 transparent; 
 width:326px; 
 height:229px;
 padding:50px 0 20px 25px;
}
.close {
   background-image: url("signin_close.png");
   display: block;
   float: right;
   height: 26px;
   margin: 10px;
   width: 26px;
}

</style>
</head>
<body>
<ul>
<li><a href="#dialog" name="modal">Entrar</a></li>
</ul>
<div id="boxes">

<div id="dialog" class="window">

<a href="#" class="close"></a><br />
<div id="form">
<form action="{$relative}/login" name="login_form" method="post">
 <div class="d-header">
   <input type="text" name="username" id="login_username" value="" onclick="this.value=''"/><br/>
   <input type="password" value="" name="password" onclick="this.value=''"/>    
   <input name="login_remember" type="checkbox" id="login_remember" class="checkbox" />
 </div><br />
 <div class="d-login"><input class="submit" name="submit_login" type="image" alt="Login" value="ENTRAR" title="Login" src="login-button.png"/></div>

</form>
   </div>
   </div>
   </div>
<div id="mask"><div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

assim:

http://forum.imasters.com.br/index.php?/topic/420881-chamar-janela-modal-via-javascript/page__view__findpost__p__1658870

Compartilhar este post

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

Informação importante

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

  Aceito