Otima dica, muito obrigado mesmo é exatamente o'que eu queria.
Mas infelizmente surgiu um erro quando eu botei na página do meu site bom vou deixar o codigo da página do meu site para ver se alguém consegue me ajudar com esse erro.
O erro é o seguinte quando a pessoa abrir o site carrega a mensagem la em cima antes dela aparecer na janela Modal como mostra nesta imagem >> http://i.imgur.com/33cKc.jpg
Mais quando a página carrega fica a janela normal em baixo como mostra nesta imagem >> http://i.imgur.com/27zmU.jpg
Bom para quem não entendeu o erro é a mensagem está aparecendo lá em cima antes da página carregar por completa.
<html lang="pt">
<head>
<meta charset="utf-8" http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SC HOST BR - Solução Inteligente em WebHost. Confira Todas As Nossas Promoções.</title>
<style type="text/css">
<!--
* {
margin:0px;
padding:0px;
}
body,td,th {
}
body {
background-color: #E1DED5;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#box_tudo_topo {
width:100%;
height:195px;
margin-left:auto;
margin-right:auto;
background-image:url(imagens/bg_topo.jpg);
}
#box_topo {
width:960px;
height:195px;
margin-left:auto;
margin-right:auto;
}
#logo_topo {
width:175px;
height:34px;
float:left;
margin-left:30px;
background-repeat:no-repeat;
background-image:url(imagens/logo_topo.png);
margin-top:20px;
}
#box_menu {
height: 20px;
width: 600px;
margin-top: 26px;
float:left;
margin-left:80px;
cursor:pointer;
}
#box_tudo_rodape {
width: 100%;
height: 167px;
background-image: url(imagens/bg_rodape.jpg);
margin-right: auto;
margin-left: auto;
}
#box_rodape {
height: 167px;
width: 960px;
margin-right: auto;
margin-left: auto;
}
#box_servicos {
height: 167px;
width: 180px;
float: left;
margin-left:30px;
}
#servicos {
height: 25px;
width: 180px;
background-color: #171A1F;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#FFF;
text-shadow:#000 1px 1px 2px;
padding-top: 5px;
}
#box_suporte {
height: 167px;
width: 180px;
float:left;
margin-left:65px;
}
#suporte {
height: 25px;
width: 180px;
background-color: #171A1F;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#FFF;
text-shadow:#000 1px 1px 2px;
padding-top: 5px;
}
#box_empresa {
height: 167px;
width: 180px;
float:left;
margin-left:65px;
}
#empresa {
height: 25px;
width: 180px;
background-color: #171A1F;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#FFF;
text-shadow:#000 1px 1px 2px;
padding-top: 5px;
}
#text_servicos {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-shadow:#000 0px 0px 3px;
color:#fff;
margin-left:10px;
margin-top:8px;
width:170px;
}
#text_suporte {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-shadow:#000 0px 0px 3px;
color:#fff;
margin-left:10px;
margin-top:8px;
width:170px;
}
#text_empresa {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-shadow:#000 0px 0px 3px;
color:#fff;
margin-left:10px;
margin-top:8px;
width:190px;
}
#abelha {
background-image:url(imagens/abelha_123x56.png);
background-repeat:no-repeat;
height:60px;
width:123px;
float:left;
margin-top: 45px;
margin-left: 45px;
opacity:0.60;
-moz-opacity: 0.60;
filter: alpha(opacity=60);
}
#abelha:hover {
opacity:1.00;
-moz-opacity: 1.00;
filter: alpha(opacity=100);
}
#box_topo2 {
height: 50px;
width: 960px;
float: left;
margin-top: 60px;
}
#texto_topo {
color: #333;
width: 640px;
margin-top: 12px;
font-size:14px;
margin-left:30px;
font-family:Arial, Helvetica, sans-serif;
color:#726F68;
float: left;
}
#botao_saibamais {
height: 40px;
width: 120px;
float:left;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #272725;
border-right-color: #272725;
border-bottom-color: #272725;
border-left-color: #272725;
background-color: #35414F;
border-radius:8px;
}
#botao_saibamais:hover {
height: 40px;
width: 120px;
float:left;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #272725;
border-right-color: #272725;
border-bottom-color: #272725;
border-left-color: #272725;
background-color: #98BA42;
border-radius:8px;
}
#saibamais {
margin-top:10px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
text-align:center;
color:#FFF;
text-shadow:#000 1px 1px 2px;
text-decoration: none;
text-transform: none;
}
#menu {
height:20px;
text-align:center;
float:left;
text-transform:uppercase;
width:75px;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
text-shadow:#000 1px 1px 2px;
font-size:11px;
}
#menu:hover {
color:#98BA42;
text-shadow:#000 1px 1px 2px;
}
#box_conteudo {
height: auto;
width: 960px;
margin-right: auto;
margin-left: auto;
margin-bottom: 50px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#conteudo {
height: 365px;
width: 900px;
margin-left: 20px;
margin-top: 15px;
background-color: #fff;
border-radius:8px;
margin-right: 10px;
}
#conteudo2 {
height: 280px;
width: 900px;
margin-left: 20px;
margin-top: 15px;
background-color: #fff;
border-radius:8px;
margin-right: 10px;
}
#barra_verde {
background-image: url(imagens/barra_verde.png);
background-repeat: no-repeat;
height: 49px;
width: 900px;
float: left;
}
#hospedagem {
float: left;
height: 20px;
width: 270px;
margin-top: 15px;
padding-left: 20px;
margin-bottom: 15px;
text-transform: uppercase;
color:#FFF;
text-shadow:#000 1px 1px 2px;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
}
#streaming {
float: left;
height: 20px;
width: 300px;
margin-top: 15px;
padding-left: 20px;
margin-bottom: 15px;
text-transform: uppercase;
color:#FFF;
text-shadow:#000 1px 1px 2px;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
}
#revenda {
float: left;
height: 20px;
width: 270px;
margin-top: 15px;
padding-left: 20px;
margin-bottom: 15px;
text-transform: uppercase;
color:#FFF;
text-shadow:#000 1px 1px 2px;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
}
#plano_hospedagem {
width:270px;
height:280px;
margin-top: 15px;
margin-left: 20px;
float: left;
}
#plano_streaming {
width:250px;
height:280px;
margin-top: 15px;
margin-left: 25px;
float: left;
margin-right: 25px;
}
#plano_revenda{
width:250px;
height:280px;
margin-top: 15px;
margin-left: 20px;
float: left;
margin-right: 20px;
}
#text_conteudo {
color: #4D4948;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #EDEDED;
height: 30px;
padding-top: 10px;
}
#box_preco {
height:50px;
width:240px;
padding-top: 15px;
margin-left: 10px;
}
#text_preco {
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#2C3240;
text-shadow:#000 1px 1px 2px;
width: 100px;
float: left;
margin-top: 10px;
}
#barra_preta {
background-image: url(imagens/barra_preta.png);
background-repeat: no-repeat;
height: 49px;
width: 900px;
float: left;
}
#text_barra_preta {
float: left;
height: 20px;
width: 700px;
margin-top: 15px;
padding-left: 15px;
margin-bottom: 15px;
color:#FFF;
text-shadow:#000 1px 1px 2px;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
}
#confirm_icon {
height:35px;
width:35px;
background-image:url(imagens/confirm_icon.png);
margin-left:25px;
margin-top:8px;
float:left;
}
#text_conteudo2 {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#2C3240;
text-shadow:#fff 1px 1px 1px;
margin-top: 10px;
}
#conteudo_suporte {
width:270px;
height:180px;
margin-top: 15px;
margin-left: 20px;
float: left;
}
#conteudo_uptime {
width:270px;
height:180px;
margin-top: 15px;
margin-left: 20px;
float: left;
}
#conteudo_livre {
width:270px;
height:180px;
margin-top: 15px;
margin-left: 20px;
float: left;
}
#relogio_icon {
height:35px;
width:35px;
background-image:url(imagens/relogio_icon.png);
margin-left:5px;
margin-top:8px;
float: left;
}
#uptime_icon {
height:35px;
width:34px;
background-image:url(imagens/host_icon.png);
margin-left:5px;
margin-top:8px;
float: left;
}
#livre_icon {
height:35px;
width:35px;
background-image:url(imagens/riscos_icon.png);
margin-left:5px;
margin-top:8px;
float: left;
}
#box_tituto2 {
height:50px;
width:270px;
}
#text_preco2 {
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#2C3240;
text-shadow:#fff 1px 1px 1px;
width: auto;
float: left;
margin-top: 16px;
margin-left: 10px;
}
</style>
<link href="shadowbox/shadowbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
language: 'pt',
player: ['img', 'html', 'swf']
});
</script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog-modal" ).dialog({
height: 178,
width: 950,
modal: true
});
});
</script>
</head>
<body>
<div id="dialog-modal" title="AVISO.">
<p>teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste.</p>
</div>
<div id="box_tudo_topo">
<div id="box_topo">
<div id="logo_topo"></div>
<div id="box_menu"> <a href="index.html">
<div id="menu">Inicio</div>
<a href="#">
<div id="menu"></div>
<a title="Promoção de Hospedagem com 50% de Desconto e 2 Dias Grátis Para Teste. Promoção Válida Por 2 Meses Após Contratação." href="prohospedagem.html" rel="shadowbox;width=1150;height=600">
<div id="menu">Hospedagem</div>
<a href="#">
<div id="menu"></div>
<a title="Promoção de Streaming com 50% de Desconto e 2 Dias Grátis Para Teste. Promoção Válida Por 2 Meses Após Contratação." href="prostreaming.html" rel="shadowbox;width=1150;height=600">
<div id="menu">Streaming</div>
<a href="#">
<div id="menu"></div>
</a> <a href="dominios.html">
<div id="menu">Dominios</div>
<a href="#">
<div id="menu"></div>
</a> <a href="revenda.html">
<div id="menu">Revenda</div>
<a href="#">
<div id="menu"></div>
<a title="Promoção de VPS Cloud Windows com 5,00 R$ de Desconto. Promoção Válida Por 2 Meses Após Contratação." href="provps.html" rel="shadowbox;width=1150;height=600">
<div id="menu">VPS</div>
<a href="#">
<div id="menu"></div>
</a> <a href="suporte.html">
<div id="menu">Suporte</div>
<a href="#">
<div id="menu"></div>
</a> <a href="#">
<div id="menu">jogos</div>
</div>
<div id="box_topo2">
<div id="texto_topo"><b>Bem vindo a Sc Host BR - Solução Inteligente em WebHost. Oferecemos Hospedagem,Streaming,VPS,Revenda e Servidores de Jogos com preços acessíveis!</b></div>
<div id="botao_saibamais">
<a href='http://www.schostbr.com/central/cart.php' title="Saiba Mais Sobre a Sc Host BR." target="_parent"><div id="saibamais"><font id="saibamais"><b>SAIBA MAIS!</b></font></div></a>
</div><center><div id="LiveChat_1349000349"></div>
<script type="text/javascript">
var __lc = {};
__lc.license = 1620201;
(function() {
var lc = document.createElement('script'); lc.type = 'text/javascript'; lc.async = true;
lc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.livechatinc.com/tracking.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s);
})();
</script>
<script type="text/javascript">
var __lc_buttons = __lc_buttons || [];
__lc_buttons.push({
elementId: 'LiveChat_1349000349',
skill: '0'
});
</script></center>
<!-- Histats.com START (hidden counter)-->
<script type="text/javascript">document.write(unescape("%3Cscript src=%27http://s10.histats.com/js15.js%27 type=%27text/javascript%27%3E%3C/script%3E"));</script>
<a href="http://www.histats.com" target="_blank" title="" ><script type="text/javascript" >
try {Histats.start(1,2087454,4,0,0,0,"");
Histats.framed_page();
Histats.track_hits();} catch(err){};
</script></a>
<noscript><a href="http://www.histats.com" target="_blank"><img src="http://sstatic1.histats.com/0.gif?2087454&101" alt="" border="0"></a></noscript>
<!-- Histats.com END -->
</div>
</div>
</div>
<div id="box_conteudo">
<center><div id="conteudo">
<div id="barra_verde">
<div id="hospedagem">hospedagem A Partir de</div>
<div id="streaming">streaming A Partir de</div>
<div id="revenda">revenda A Partir de</div>
</div>
<div id="plano_hospedagem">
<div id="text_conteudo">5 GB de Espaço em Disco</div>
<div id="text_conteudo">Transferência Mensal Ilimitada</div>
<div id="text_conteudo"> 200 - Contas de E-mail</div>
<div id="text_conteudo"> 2 - Domínios Estacionados</div>
<div id="text_conteudo">24/7 Suporte ao Cliente</div>
<div id="box_preco">
<div id="text_preco">R$ 2.49</div>
<div id="botao_saibamais">
<a href='http://www.schostbr.com/central/cart.php?a=add&pid=23' target="_parent"><div id="saibamais"><font id="saibamais"><b>CONTRATAR!</b></font></div></a>
</div>
</div>
</div>
<div id="plano_hospedagem">
<div id="text_conteudo">3 GB de Auto DJ</div>
<div id="text_conteudo">300 Ouvintes</div>
<div id="text_conteudo">Painel WHMSonic</div>
<div id="text_conteudo">Qualidade 96 kbps | Mp3 ou AAcplus</div>
<div id="text_conteudo">24/7 Suporte ao Cliente</div>
<div id="box_preco">
<div id="text_preco">R$ 3.99</div>
<div id="botao_saibamais">
<a href='http://www.schostbr.com/central/cart.php?a=add&pid=29' target="_parent"><div id="saibamais"><font id="saibamais"><b>CONTRATAR!</b></font></div></a>
</div>
</div>
</div>
<div id="plano_hospedagem">
<div id="text_conteudo"> Espaço em Disco - Ilimitado</div>
<div id="text_conteudo"> Largura de Banda - Ilimitada</div>
<div id="text_conteudo">Contas cPanel - Ilimitadas</div>
<div id="text_conteudo">Dominio .com ou .net grátis por 1 ano</div>
<div id="text_conteudo">24/7 Suporte ao Cliente</div>
<div id="box_preco">
<div id="text_preco">R$ 45.00</div>
<div id="botao_saibamais">
<a href='http://www.schostbr.com/central/cart.php?a=add&pid=20' target="_parent"><div id="saibamais"><font id="saibamais"><b>CONTRATAR!</b></font></div></a>
</div>
</div>
</div>
</div></p>
<p><div id="conteudo2">
<div id="barra_preta">
<div id="confirm_icon"></div>
<div id="text_barra_preta">Todos os nossos planos incluem os seguintes recursos.</div>
</div>
<div id="conteudo_suporte">
<div id="box_tituto2">
<div id="box_tituto2">
<div id="relogio_icon"></div>
<div id="text_preco2">24/7 Apoio ao Cliente</div>
</div></div>
<div id="text_conteudo2">Nosso apoio ao cliente está aqui e pronto </div>
<div id="text_conteudo2">para ajudá-lo 24/7. </div>
<div id="text_conteudo2">Se você precisar de ajuda para tarde da noite ou</div>
<div id="text_conteudo2">cedo, nós estaremos aqui prontos para </div>
<div id="text_conteudo2">ajudar via Live Chat, VOIP, ticket e no telefone!</div>
</div>
<div id="conteudo_uptime">
<div id="box_tituto2">
<div id="uptime_icon"></div>
<div id="text_preco2">Garantia de Uptime </div>
</div>
<div id="text_conteudo2">Hospede quantos sites quiser. Nossa WebHosting <br />
</div>
<div id="text_conteudo2">permite que voce crie sites ilimitados. que</div>
<div id="text_conteudo2">significa também contas de e-mail ilimitadas, MySQL</div>
<div id="text_conteudo2">contas FTP, sub-dominios e muito mais!</div>
</div>
<div id="conteudo_livre">
<div id="box_tituto2">
<div id="livre_icon"></div>
<div id="text_preco2">100% Livre de Riscos</div>
</div>
<div id="text_conteudo2">A Sc Host BR hospeda o seu site e sua web rádio com segurança<br />
</div>
<div id="text_conteudo2">Evitando problemas e complicações ao longo do</div>
<div id="text_conteudo2">tempo.</div>
</div>
</div></p></center>
</div>
<div id="box_tudo_rodape">
<div id="box_rodape">
<div id="box_servicos">
<div id="servicos">Serviços</div>
<a href="hospedagem.html">
<div id="text_servicos">Hospedagem</div>
<a href="dominio.html">
<div id="text_servicos">Dominios</div>
<a href="streaming.html">
<div id="text_servicos">Streaming</div>
<a href="vps.html">
<div id="text_servicos">VPS</div>
<a href="revenda.html">
<div id="text_servicos">Revendas</div>
</div>
<div id="box_suporte"> <a href="#">
<div id="suporte">Suporte</div>
<a href="suporte.html">
<div id="text_suporte">Base de Conhecimentos</div>
<a href="http://www.schostbr.com/central/contact.php">
<div id="text_suporte">Enviar Ticket</div>
<a href="http://www.schostbr.com/central/clientarea.php">
<div id="text_suporte">Cliente Login</div>
</div>
<div id="box_suporte"> <a href="#">
<div id="suporte">Empresa</div>
<a href="#">
<div id="text_suporte">Sobre Nós</div>
<a href="#">
<div id="text_suporte">Termos de Serviço</div>
<a href="#">
<div id="text_suporte">Politíca de Privacidade</div>
<a href="http://www.facebook.com/pages/Sc-Host-BR/116396701845813?ref=ts&fref=ts">
<div id="text_suporte">FaceBook</div>
</div>
<div id="box_empresa"> <a href="#">
<div id="empresa">Selos de Credibilidade</div>
<div id="text_empresa"></div>
<div id="text_empresa">
<div id="selo_siteforte">
<script type="text/javascript">
var _sfurl = "www.schostbr.com";
var _sfid = "4fb2ac1449b8a9378000000a";
var _sfhttptls = ('https:' == document.location.protocol ? 'https://' : 'http://');
(function() {
var _sfa = document.createElement('script'); _sfa.type = 'text/javascript';
_sfa.src = _sfhttptls + 'siteforte.com.br/selo.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(_sfa, s);
})();
</script>
</div>
</div>
<div id="text_empresa"></div>
<div id="text_empresa"></div>
</div>
</div>
</div>
</body>
</html>
Desde já muito obrigado pela ajuda. E desculpa por postar o código desse jeito é que não tenho muita experiência com Fórum para postar o código de um modo mais escondido. :D