duvida ao carregar um div ao abrir a pagina

fabiosanches · Junho 17, 2008

bom galera a duvida é a seguinte.. eu quero q na hora q o cara abrir o site apareça tipo um popup so q é um div.. mais tem q estar sobreposto ao site sem bagunçar ele.. e com um botão para fechar..

eu utilizo um script q é o seguinte..

<script language="javascript">
function popUP(url){
    var div=document.getElementById("divEscondido")
    div.getElementsByTagName("iframe")[0].src=url
    div.style.display="block" 
    div.style.float = "left";
    
        div.getElementsByTagName("a")[0].onclick=function(){
        document.getElementById("divEscondido").style.display="none"
        }
}

<div id="divEscondido">
<br><br><a href="#"><p align="center"><b>[Fechar]</b></p></a>
<iframe src="" width="300" height="80">popup</iframe>
</div>

<script language="javascript">
parent.window.popUP("cadastro/popup.php")
</script>

eu utilizo ele quando o cara clica em um botao e tals.. mais eu queria colocar ele de forma q sempre q o cara entrar aparecesse o div com o botao fechar para o cara fechar ele.. como faço??

KaKarotto · Junho 17, 2008

Só chamar a função ué.

fabiosanches · Junho 18, 2008

no caso a chamada da função seria isso aki né?

<script language="javascript">
parent.window.popUP("cadastro/popup.php")
</script>

porque se for eu já fiz isso e não funfou.. a não ser q coloquei ela no lugar errado.. hehe

KaKarotto · Junho 18, 2008

a não ser q coloquei ela no lugar errado.. hehe

Bem provável que seja isso.

Usa :

window.onload=function(){
   parent.window.popUP("cadastro/popup.php")
}

Aqui ele se certifica de que o div já foi carregado, então o Js pode fazer referências ao div.

fabiosanches · Junho 18, 2008

ficaria assim então??

<script language="javascript">
function popUP(url){
    var div=document.getElementById("divEscondido")
    div.getElementsByTagName("iframe")[0].src=url
    div.style.display="block" 
    div.style.float = "left";
    
        div.getElementsByTagName("a")[0].onchange=function(){
        document.getElementById("divEscondido").style.display="block"
        }
}

<div id="divEscondido">
<br><br><a href="#"><p align="center"><b>[Fechar]</b></p></a>
<iframe src="" width="300" height="80">popup</iframe>
</div>

<script language="javascript">
window.onload=function(){
   parent.window.popUP("cadastro/popup.php")
}
//parent.window.popUP("cadastro/popup.php")
</script>

ficaria assim então?? porque se for não ta funcionando.. hehe.. tipo segue abaixo o html completo.. precisa de ter um form por acaso?? porque no caso não tem. hehe

<!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"><!-- InstanceBegin template="Templates/modelo.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->

<title>STURI&Atilde;O - Inform&aacute;tica</title>
<script language="javascript">
function popUP(url){
	var div=document.getElementById("divEscondido")
	div.getElementsByTagName("iframe")[0].src=url
	div.style.display="block" 
	div.style.float = "left";

		div.getElementsByTagName("a")[0].onchange=function(){
		document.getElementById("divEscondido").style.display="block"
		}
}

<div id="divEscondido">
<br><br><a href="#"><p align="center"><b>[Fechar]</b></p></a>
<iframe src="" width="300" height="80">popup</iframe>
</div>

<script language="javascript">
window.onload=function(){
   parent.window.popUP("cadastro/popup.php")
}
//parent.window.popUP("cadastro/popup.php")
</script>


<!-- InstanceEndEditable -->
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url(images/bg.gif);
}
.style3 {	font-size: 10px;
	color: #FFFFFF;
}
-->
</style>
<script language="JavaScript"><!--
function verfonte()
{
if (event.button==2)
{
window.alert('Direitos negados.\n\nClique em Ok, para continuar.')
}
}
document.onmousedown=verfonte
// --></script>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
	var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
	if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="style_1.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
.style4 {color: #000000}
.style5 {color: #333333}
.style6 {color: #FFFFFF}
-->
</style>
<!-- InstanceEndEditable -->
</head>

<body onload="MM_preloadImages('images/topo-2_04.jpg','images/topo-2_05.jpg','images/topo-2_06.jpg','images/topo-2_07.jpg','images/topo-2_08.jpg','images/topo-2_09.jpg')">
<table width="773" border="0" align="center" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
	<td width="773" height="19" valign="top"><!-- InstanceBeginRepeat name="topo" --><!-- InstanceBeginRepeatEntry --><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>
  </tr>
  <tr>
	<td height="98" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
	  <!--DWLayoutTable-->
	  <tr>
		<td width="258" height="98" valign="top"><img src="images/topo-1_01.jpg" width="258" height="98" /></td>
		  <td width="252" valign="top"><img src="images/topo-1_02.jpg" width="252" height="98" /></td>
		  <td width="263" valign="top"><img src="images/topo-1_03.jpg" width="262" height="98" border="0" usemap="#Map" /></td>
		</tr>





	</table></td>
  </tr>
  <tr>
	<td height="24" valign="top"><!-- InstanceBeginRepeat name="menu" --><!-- InstanceBeginRepeatEntry -->
	  <table width="100%" border="0" cellpadding="0" cellspacing="0">
		<!--DWLayoutTable-->
		<tr>
		  <td width="132" height="24" valign="top"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/topo-2_04.jpg',1)"><img src="images/topo-1_04.jpg" name="Image4" width="132" height="24" border="0" id="Image4" /></a></td>
		  <td width="126" valign="top"><a href="empresa.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/topo-2_05.jpg',1)"><img src="images/topo-1_05.jpg" name="Image5" width="126" height="24" border="0" id="Image5" /></a></td>
		  <td width="126" valign="top"><a href="estrutura.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/topo-2_06.jpg',1)"><img src="images/topo-1_06.jpg" name="Image6" width="126" height="24" border="0" id="Image6" /></a></td>
		  <td width="126" valign="top"><a href="servico.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/topo-2_07.jpg',1)"><img src="images/topo-1_07.jpg" name="Image7" width="126" height="24" border="0" id="Image7" /></a></td>
		  <td width="126" valign="top"><a href="produto.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/topo-2_08.jpg',1)"><img src="images/topo-1_08.jpg" name="Image8" width="126" height="24" border="0" id="Image8" /></a></td>
		  <td width="137" valign="top"><a href="contato.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/topo-2_09.jpg',1)"><img src="images/topo-1_09.jpg" name="Image9" width="136" height="24" border="0" id="Image9" /></a></td>
		</tr>
	  </table>
	<!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>
  </tr>
  <tr>
	<td height="118" valign="top"><!-- InstanceBeginRepeat name="banner" --><!-- InstanceBeginRepeatEntry -->
	  <table width="100%" border="0" cellpadding="0" cellspacing="0">
		<!--DWLayoutTable-->
		<tr>
		  <td width="430" height="118" valign="top"><img src="images/banner-1.jpg" width="430" height="118" /></td>
		  <td width="343" valign="top"><img src="images/banner-2.jpg" width="343" height="118" /></td>
		</tr>
	  </table>
	<!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>
  </tr>
  <tr>
	<td height="327" valign="top"><!-- InstanceBeginEditable name="corpo" -->
	  <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
		<!--DWLayoutTable-->
		<tr>
		  <td width="23" rowspan="5" valign="top"><p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
		  <p>&nbsp;</p>			<p>&nbsp;</p></td>
		  <td height="19" colspan="2" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
		  <td width="23" rowspan="5" valign="top"><p>&nbsp;</p>			<p>&nbsp;</p></td>
		</tr>
		<tr>
		  <td width="492" height="245" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
			<!--DWLayoutTable-->
			<tr>
			  <td width="239" height="245" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
				<!--DWLayoutTable-->
				<tr>
				  <td height="139" colspan="2" valign="top"><img src="images/comp_1_1.jpg" width="239" height="139" /></td>
					</tr>
				<tr>
				  <td width="150" rowspan="4" valign="top"><p>Processador Celeron D  420 1,6 <br />
512 MB  RAM  <br />
HD DE 160 SATA<br />
Gravador de CD e DVD<br />
Monitor LCD 15</p>					</td>
					  <td width="89" height="50" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
					</tr>

				<tr>
				  <td height="25" valign="top" background="images/b2.jpg"><p align="right" class="style6"><strong>R$ 1.190,00 </strong></p>					</td>
				</tr>

				<tr>
				  <td height="5" valign="top"><img src="images/space.gif" width="2" height="2" /></td>
				</tr>











				<tr>
				  <td height="25" valign="top" background="images/b1.jpg"><p align="right"><a href="produto.html" class="style6 style2">Mais &gt;&gt;</a></p>					</td>
					</tr>







				</table></td>
				<td width="7" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
				  <!--DWLayoutTable-->
				  <tr>
					<td width="7" height="245"><div align="center"><img src="images/linha.jpg" width="1" height="229" /></div></td>
				  </tr>

				  </table></td>
			  <td width="239" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
				  <!--DWLayoutTable-->
				  <tr>
					<td height="139" colspan="2" valign="top"><img src="images/comp_2_1.jpg" width="239" height="139" /></td>
					</tr>
				  <tr>
					<td width="150" rowspan="5" valign="top"><p>Processador DC  E2140 1,6 <br />
512 MB RAM<br />
Gravador de CD e DVD<br />
HD 160 SATA
<br />
Monitor LCD 15&rdquo;</p>					  </td>
					<td width="89" height="50" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
					</tr>

				  <tr>
					<td height="25" valign="top" background="images/b2.jpg"><p align="right" class="style6"><strong>R$ 1.310,00 </strong></p>					  </td>
					</tr>

				  <tr>
					<td height="5" valign="top"><img src="images/space.gif" width="2" height="2" /></td>
					</tr>


				  <tr>
					<td height="25" valign="top" background="images/b1.jpg"><p align="right"><a href="produto.html" class="style6 style2">Mais &gt;&gt;</a></p>					  </td>
					</tr>
				  <tr>
					<td height="1"></td>
					</tr>











				</table></td>
				<td width="7" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
				  <!--DWLayoutTable-->
				  <tr>

				  </tr>

				  </table></td>
			</tr>
























		  </table></td>
		  <td width="235" rowspan="4" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
			<!--DWLayoutTable-->
			<tr>
			  <td width="235" height="147" valign="top"><img src="images/box_1.jpg" width="235" height="147" /></td>
			  </tr>
			<tr>
			  <td height="208" valign="top" background="images/box_1_2.jpg"><p class="style3"><span class="style4"><span class="style4"><span class="style5"><strong>::</strong> Servidores Linux e Windows;</span></span></span></p>
				  <p class="style3 style5"> <strong>::</strong> Implanta&ccedil;&atilde;o de seguran&ccedil;a corporativa;</p>
				  <p class="style3 style5"> <strong>::</strong> Controle de acesso &agrave; internet;</p>
				  <p class="style3 style5"> <strong>::</strong> Projetos de redes estruturadas;</p>
				  <p class="style3 style5"> <strong>::</strong> Instala&ccedil;&atilde;o de internet via Embratel;</p>
				  <p class="style3 style5"> <strong>::</strong> Instala&ccedil;&atilde;o de acesso &agrave; internet wireless;</p>
				  <p align="left" class="style3 style5"><strong>::</strong> Manuten&ccedil;&atilde;o de micro computador.</p>
				  <p align="right" class="style3"><img src="images/bot.gif" width="80" height="25" border="0" usemap="#Map6" />
  <map name="Map6" id="Map6">
	<area shape="rect" coords="2,2,79,23" href="servico.html" />
</map></p>				</td>
			  </tr>
			<tr>
			  <td height="23" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
			  </tr>

			<tr>
			  <td height="129" valign="top"><img src="images/box.jpg" width="235" height="129" border="0" usemap="#Map" />
				<map name="Map" id="Map">
				  <area shape="rect" coords="10,98,90,114" href="loja/" />
				</map></td>
			  </tr>















			<tr>
			  <td height="19" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
			  </tr>











		  </table></td>
		</tr>
		<tr>
		  <td height="19"><img src="images/linha_1.jpg" width="489" height="1" /></td>
		</tr>
		<tr>
		  <td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
			<!--DWLayoutTable-->
			<tr>
			  <td width="239" height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
				<!--DWLayoutTable-->
				<tr>
				  <td height="139" colspan="2" valign="top"><img src="images/comp_3_1.jpg" width="239" height="139" /></td>
					</tr>
				<tr>
				  <td width="150" rowspan="4" valign="top"><p>Processador C2 DUO 1,86 <br />
					Placa M&atilde;e ASUS<br />
					512 MB RAM<br />
					Gravador de CD e DVD<br />
					HD 160 SATA <br />
					Monitor LCD 17&rdquo;</p>					</td>
					  <td width="89" height="50" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
					</tr>
				<tr>
				  <td height="25" valign="top" background="images/b2.jpg"><p align="right" class="style6"><strong>R$ 1.690,00</strong></p>					</td>
					</tr>





					<tr>
					  <td height="5" valign="top"><img src="images/space.gif" width="2" height="2" /></td>
					</tr>



					<tr>
					  <td height="25" valign="top" background="images/b1.jpg"><p align="right"><a href="produto.html" class="style6 style2">Mais &gt;&gt;</a></p>
					  </td>
					</tr>







				</table></td>
				<td width="7" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
				  <!--DWLayoutTable-->
				  <tr>
					<td width="7" height="244"><div align="center"><img src="images/linha.jpg" width="1" height="229" /></div></td>
				  </tr>
				  </table></td>
			  <td width="239" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
				  <!--DWLayoutTable-->
				  <tr>
					<td height="139" colspan="2" valign="top"><img src="images/comp_4_1.jpg" width="239" height="139" /></td>
					</tr>
				  <tr>
					<td width="150" rowspan="4" valign="top"><p>Processador C2 QUAD 2,4GHZ <br />
Placa M&atilde;e ASUS<br />
1 G RAM<br />
Gravador de CD e DVD<br />
Driver de 1.44<br />
Monitor LCD 17&rdquo;</p>
					  </td>
					<td width="89" height="50" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
					</tr>
				  <tr>
					<td height="25" valign="top" background="images/b2.jpg"><p align="right" class="style6"><strong>CONSULTE</strong></p>					  </td>
				  </tr>


				  <tr>
					<td height="5" valign="top"><img src="images/space.gif" width="2" height="2" /></td>
					</tr>



				  <tr>
					<td height="25" valign="top" background="images/b1.jpg"><p align="right"><a href="produto.html" class="style6 style2">Mais &gt;&gt;</a></p>
					  </td>
					</tr>








				</table></td>
			  <td width="7" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
				<!--DWLayoutTable-->
				<tr>
				  <td width="7" height="244">&nbsp;</td>
				</tr>
			  </table>
			  </td>
			</tr>












		  </table></td>
		</tr>









		<tr>
		  <td height="19" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
		</tr>
	  </table>
	<!-- InstanceEndEditable --></td>
  </tr>


  <tr>
	<td height="19" valign="top"><!-- InstanceBeginRepeat name="rodape" --><!-- InstanceBeginRepeatEntry -->
	  <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
		<!--DWLayoutTable-->
		<tr>
		  <td width="773" height="19" background="images/rodape.jpg"><div align="center"><span class="style3"><font face="Arial, Helvetica, sans-serif">Copyright 
			&copy; 2006 Sturi&atilde;o Inform&aacute;tica- Todos os direitos 
			reservados - Proibida a reprodu&ccedil;&atilde;o sem mencionar a 
			fonte. </font><font color="#FFFFFF" size="1" face="Arial, Helvetica, sans-serif">(Designed by SALTO - Comunica&ccedil;&atilde;o)</font></span></div></td>
		</tr>
	  </table>
	<!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>
  </tr>
</table>

<map name="Map" id="Map">
<area shape="poly" coords="13,14,21,87,182,81,110,18" href="servico.html" />
</map></body>
<!-- InstanceEnd --></html>

fiz diferente.. criei um layer.. so q to com um problema.. quando eu clico no FECHAR.. ele não fecha no firefox.. do no internet explorer.. o codigo do layer é esse abaixo

<div id="Layer1" style="position:absolute; width:290px; height:72px; z-index:1; left: 248px; top: 166px;"><a href="java script:;" onclick="MM_showHideLayers('Layer1','','hide')"><img src="cadastro/img/fechar.png" width="289" height="20" border="0" /></a><a href="http://www.sturiao.com.br/cadastro/panfleto.php" target="_blank"><img src="cadastro/img/popup.png" width="289" height="50" border="0" /></a></div>

KaKarotto · Junho 18, 2008

Tem algumas coisas erradas no seu HTML....cuidado com isso.

Eu testei um código novo aqui no seu html e não funcionou, justamente pelo fato do html estar mal formulado.

Olha só um código melhor para seu pop up:

function popUp(url, div){

    var iframe=document.createElement("iframe")

    div.appendChild(iframe)
    iframe.src=url
    div.className="show"

    var a=document.createElement("a")
    div.appendChild(a)

    a.href="#"
    a.innerHTML="[Fechar]"

        a.onclick=function(){
            div.removeChild(iframe)
            div.removeChild(a)
            div.className="hidden"
        }
}

O div ficaria vazio no seu html:

<div id="divEscondido" class="hidden"></div>

Para chamar a função:

window.onload=function(){
 popUp(
  "http://www.google.com.br",
  document.getElementById("divEscondido")
 )
}

Essa função nova vai criar os elementos e vai apagá-los. Qualquer formatação que queira fazer deve ser por Css. Pode ou não utilizar as classes "hidden" para o div quando estiver oculto e "show" para quando estiver aparecendo.

Se não funcionar, é seu html. Este código DEVE funcionar. Uma coisa que notei no seu código é que em uma parte você coloca uma tag script, coloca os códigos em javascript e simplesmente bota um div em html dentro dessa tag script. Isso aí dá pau véio...não funcionará nunca.

Aquele abraço.

Entrar

duvida ao carregar um div ao abrir a pagina

Pergunta

fabiosanches

Link para o comentário

Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

KaKarotto

Link para o comentário

Compartilhar em outros sites

fabiosanches

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

fabiosanches

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades