Ir para conteúdo

POWERED BY:

Arquivado

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

Marcello HulleY

Janela Modal JQuery abrir automaticamente

Por , em Javascript

Recommended Posts

Marcello HulleY    0

Marcello HulleY
Postado

Fala galera, sou novato por aqui e estou com uma dúvida.

 

Tenho um script de janela model simples e estou precisando abrir ela ao entrar na pagina sem clicar em nada.

 

Segue código:

 

[index.html]

<!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=utf-8" />
<title>Documento sem título</title>

<link rel="stylesheet" href="jquery.superbox.css" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.superbox-min.js"></script>

<script type="text/javascript">
	$(function (){
		$.superbox.settings = {
			closeTxt: "Fechar",
			loadTxt: "Carregando...",
			overlayOpacity: .8, // Background opaqueness
			boxWidth: "600", // Default width of the box
			boxHeight: "400", // Default height of the box
	};
	$.superbox();
			});
</script>
</head>

<body>
<a href="modal.html" rel="superbox[ajax][modal.html]">SuperBox</a>
</body>
</html>

 

A página [modal.html] é a que aparece na janela modal, está funcionando perfeitamente SE clicar no link Superbox.

Eu preciso que seja carregada automaticamente ao entrar no site sem clicar em nada como esse site [http://portal.anhembi.br/index.html]

 

Alguém pode me dar uma ajudinha?

 

Valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

você precisa ver na documentação do superbox se esse plugin suporta esse tipo de coisa.

 

http://pierrebertet.net/projects/jquery_superbox/

 

(pelo que olhei rapidamente, aparentemente só você você disparar um .click() no seu elemento).

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcello HulleY    0

Marcello HulleY
Postado

Acredito que é só trocar aquele $(function (){ por $().ready(function() {.

 

Valeu, mas não foi :(

 

você precisa ver na documentação do superbox se esse plugin suporta esse tipo de coisa.

 

http://pierrebertet.net/projects/jquery_superbox/

 

(pelo que olhei rapidamente, aparentemente só você você disparar um .click() no seu elemento).

 

Opa beleza? Obrigado pelo help, mas não consegui disparar um .click() e também não achei a documentação... :( então pesquisei na net e vi o código abaixo que seria mais ou menos o que eu procurava:

<head>
<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() {

	var maskHeight = $(document).height();
	var maskWidth = $(window).width();

	$('#mask').css({'width':maskWidth,'height':maskHeight});

	$('#mask').fadeIn(1000);	
	$('#mask').fadeTo("slow",0.6);

	//Get the window height and width
	var winH = $(window).height();
	var winW = $(window).width();

	$('#dialog2').css('top',  winH/2-$('#dialog2').height()/2);
	$('#dialog2').css('left', winW/2-$('#dialog2').width()/2);

	$('#dialog2').fadeIn(2000); 

$('.window .close').click(function (e) {
	e.preventDefault();

	$('#mask').hide();
	$('.window').hide();
});		

$('#mask').click(function () {
	$(this).hide();
	$('.window').hide();
});			

});
</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: #000;

 display:none;
}

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

#boxes #dialog2 {

 background-color:#FFF; 
 width:700px; 
 height:400px;

}

.close{display:block; text-align:right; }

</style>


</head>

<body>

<div id="boxes">


<!-- Janela Modal com Bloco de Nota -->
<div id="dialog2" class="window";>


<img src="teste.gif" width="700" height="400" border="0" usemap="#Map1" />
<map name="Map1" id="Map1">
 <area shape="rect" coords="62,414,428,467" href="endereço da página" />

</map>

</div>
</div>
<!-- Fim Janela Modal com Bloco de Nota -->



<!-- Máscara para cobrir a tela -->
 <div id="mask"></div>


</body>

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