Ir para conteúdo
View in the app

A better way to browse. Learn more.

Portal do Host

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Ajuda Com Janela Modal De Inicialização Automatica

Featured Replies

Postado

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



Postado
  • Autor

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


Visitante
Este tópico está impedido de receber novos posts.

Quem Está Navegando 0

  • Nenhum usuário registrado visualizando esta página.

Informação Importante

Concorda com os nossos termos?

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.