Ajuda Com Janela Modal De Inicialização Automatica

ScHostBR · Outubro 12, 2012

Bom pessoal eu to precisando de uma ajuda aqui com janela modal de inicialização automatica como esta " http://www.tidbits.c...-modal-lightbox ".

Bom como vocês podem ver neste site citado acima encina como fazer so que eu tentei aqui por varias vezes fazer este tipo de janela olhando este tutorial e não consegui, caso alguem saiba como me esplicar mais detalhado agradeço.

Desde já muito Obrigado a Todos Pela Colaboração, e desculpa se não for a área correta. :D

joaopaulo · Outubro 12, 2012

Porque você não usa o Jquery UI. É bem mais completo e documentada.

http://jqueryui.com/dialog/#modal

ScHostBR · Outubro 13, 2012

Porque você não usa o Jquery UI. É bem mais completo e documentada.

http://jqueryui.com/dialog/#modal

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/j&#097;v&#097;script" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/j&#097;v&#097;script" src="shadowbox/shadowbox.js"></script>

<script type="text/j&#097;v&#097;script">

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/j&#097;v&#097;script">

var __lc = {};

__lc.license = 1620201;

(function() {

var lc = &#100;ocument.createElement('script'); lc.type = 'text/j&#097;v&#097;script'; lc.async = true;

lc.src = ('https:' == &#100;ocument.location.protocol ? 'https://' : 'http://') + 'cdn.livechatinc.com/tracking.js';

var s = &#100;ocument.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s);

})();

</script>

<script type="text/j&#097;v&#097;script">

var __lc_buttons = __lc_buttons || [];

__lc_buttons.push({

elementId: 'LiveChat_1349000349',

skill: '0'

});

</script></center>

<!-- Histats.com START (hidden counter)-->

<script type="text/j&#097;v&#097;script">&#100;ocument.write(unescape("%3Cscript src=%27http://s10.histats.com/js15.js%27 type=%27text/j&#097;v&#097;script%27%3E%3C/script%3E"));</script>

<a href="http://www.histats.com" target="_blank" title="" ><script type="text/j&#097;v&#097;script" >

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&amp;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&amp;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&amp;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/j&#097;v&#097;script">

var _sfurl = "www.schostbr.com";

var _sfid = "4fb2ac1449b8a9378000000a";

var _sfhttptls = ('https:' == &#100;ocument.location.protocol ? 'https://' : 'http://');

(function() {

var _sfa = &#100;ocument.createElement('script'); _sfa.type = 'text/j&#097;v&#097;script';

_sfa.src = _sfhttptls + 'siteforte.com.br/selo.js';

var s = &#100;ocument.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

Entrar

Ajuda Com Janela Modal De Inicialização Automatica

Posts Recomendados

ScHostBR

Link para o comentário

Compartilhar em outros sites

joaopaulo

Link para o comentário

Compartilhar em outros sites

ScHostBR

Link para o comentário

Compartilhar em outros sites

Quem Está Navegando 0 membros estão online

Tópicos recentes

Browse

Informação Importante