Ir para conteúdo
  • Cadastre-se

PopUp interno

EduardoRissao
 Compartilhar

Posts Recomendados

Anger

Anger

Postado
Postado

@Thiago Sabaia não é isso que ele quer...

 

56 minutos atrás, EduardoRissao disse:

Ok, vou fazer aqui.

Bem, o site é só institucional, nada de vendas ou algo assim, então ficar fora do ar por alguns minutos não vai me prejudicar muito.

 

@Edit

Então, pelo que eu vi ele vai criar um texto e, quando clicar nele, abrir a lightbox.
O que eu queria é que, quando entrar no site, já abrir ela.

A função que eu te passei faz isso.. se for para usa lightbox, clicar para abrir, eu iria lhe passar um código em HTML 5, não em java..

Hoje, o único jeito de abrir pop up junto do site automaticamente é por javascript, ou seja, o código que te passei acima.

Ou então com um hack simples de HTML5..

Primeiro, defina o CSS: 

.modalDialog {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 99999;
		opacity:0;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
		pointer-events: none;
	}

	.modalDialog:target {
		opacity:1;
		pointer-events: auto;
	}

	.modalDialog > div {
		width: 400px;
		position: relative;
		margin: 10% auto;
		padding: 5px 20px 13px 20px;
		border-radius: 10px;
		background: #fff;
		
	}

	.close {
		background: #000;
		color: #FFFFFF;
		line-height: 25px;
		position: absolute;
		right: -12px;
		text-align: center;
		top: -10px;
		width: 24px;
		text-decoration: none;
		font-weight: bold;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		-moz-box-shadow: 1px 1px 3px #000;
		-webkit-box-shadow: 1px 1px 3px #000;
		box-shadow: 1px 1px 3px #000;
	}

	.close:hover { background: #00d9ff; }

Segundo, cole este código dentro do seu arquivo index. 

<div id="boasfestas" class="modalDialog">
  <div>
    <a href="#close" title="Fechar" class="close">X</a>
    <h2>Feliz natal!</h2>
    <img src="CASOQUEIRAIMAGEM.jpg"/><br>
<b>Boas festas!</b>
      </div>
</div>

Terceiro, crie um redirecionamento, pode ser via cPanel para: seudominio.com.br/index.EXTENÇÃO#boasfestas

Exemplo: www.seudominio.com.br/index.html#boasfestas

A janela pop up vai abrir automaticamente. Você também pode usar este método para criar um botão de chamada da janela pop up em algum lugar com esse código: 

<a href="#boasfestas">Abrir Pop up boas festas</a>
<!-- o href define a âncora de abertura, mudando ele, deverá mudar a ID no código de chamada. -->

Qualquer dúvida, só falar.

Ajude o fórum! Antes de postar, leiam as regras de postagem aqui.

Link para o comentário
Compartilhar em outros sites
EduardoRissao

EduardoRissao

Postado
  • Autor
Postado
22 horas atrás, Anger disse:

@Thiago Sabaia não é isso que ele quer...

 

A função que eu te passei faz isso.. se for para usa lightbox, clicar para abrir, eu iria lhe passar um código em HTML 5, não em java..

Hoje, o único jeito de abrir pop up junto do site automaticamente é por javascript, ou seja, o código que te passei acima.

Ou então com um hack simples de HTML5..

Primeiro, defina o CSS: 


.modalDialog {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 99999;
		opacity:0;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
		pointer-events: none;
	}

	.modalDialog:target {
		opacity:1;
		pointer-events: auto;
	}

	.modalDialog > div {
		width: 400px;
		position: relative;
		margin: 10% auto;
		padding: 5px 20px 13px 20px;
		border-radius: 10px;
		background: #fff;
		
	}

	.close {
		background: #000;
		color: #FFFFFF;
		line-height: 25px;
		position: absolute;
		right: -12px;
		text-align: center;
		top: -10px;
		width: 24px;
		text-decoration: none;
		font-weight: bold;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		-moz-box-shadow: 1px 1px 3px #000;
		-webkit-box-shadow: 1px 1px 3px #000;
		box-shadow: 1px 1px 3px #000;
	}

	.close:hover { background: #00d9ff; }

Segundo, cole este código dentro do seu arquivo index. 


<div id="boasfestas" class="modalDialog">
  <div>
    <a href="#close" title="Fechar" class="close">X</a>
    <h2>Feliz natal!</h2>
    <img src="CASOQUEIRAIMAGEM.jpg"/><br>
<b>Boas festas!</b>
      </div>
</div>

Terceiro, crie um redirecionamento, pode ser via cPanel para: seudominio.com.br/index.EXTENÇÃO#boasfestas

Exemplo: www.seudominio.com.br/index.html#boasfestas

A janela pop up vai abrir automaticamente. Você também pode usar este método para criar um botão de chamada da janela pop up em algum lugar com esse código: 


<a href="#boasfestas">Abrir Pop up boas festas</a>
<!-- o href define a âncora de abertura, mudando ele, deverá mudar a ID no código de chamada. -->

Qualquer dúvida, só falar.

Fiz isso que falou e aconteceu isso:
http://imgur.com/FmogaKk

PS: Isso acontece tanto na URL padrão (/index.php) quando na editada (/index.php#boasfestas)
PS2: a imagem é só um teste, vou montar uma depois.
 

 

22 horas atrás, Clayderson disse:

O boy vai acabar desistindo kkkk.

Se quiser, me manda MP com seu Skype e eu monto o "esqueleto" pra você, daí você coloca os textos e imagens que quiser depois.

PS: não vou cobrar nada, é na parceria mesmo.

Já te mando. =)

Link para o comentário
Compartilhar em outros sites
Anger

Anger

Postado
Postado
34 minutos atrás, EduardoRissao disse:

Fiz isso que falou e aconteceu isso:
http://imgur.com/FmogaKk

PS: Isso acontece tanto na URL padrão (/index.php) quando na editada (/index.php#boasfestas)
PS2: a imagem é só um teste, vou montar uma depois.
 

 

Já te mando. =)

Você não definiu o CSS, né?

Tem que definir o CSS... se vai colocar dentro do próprio index coloque o css dentro das tags <style> </style>

 

 

Coloque este código dentro do seu <body>

  

<style> .modalDialog {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 99999;
		opacity:0;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
		pointer-events: none;
	}

	.modalDialog:target {
		opacity:1;
		pointer-events: auto;
	}

	.modalDialog > div {
		width: 400px;
		position: relative;
		margin: 10% auto;
		padding: 5px 20px 13px 20px;
		border-radius: 10px;
		background: #fff;
		
	}

	.close {
		background: #000;
		color: #FFFFFF;
		line-height: 25px;
		position: absolute;
		right: -12px;
		text-align: center;
		top: -10px;
		width: 24px;
		text-decoration: none;
		font-weight: bold;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		-moz-box-shadow: 1px 1px 3px #000;
		-webkit-box-shadow: 1px 1px 3px #000;
		box-shadow: 1px 1px 3px #000;
	}

	.close:hover { background: #00d9ff; }</style>

<div id="boasfestas" class="modalDialog">
  <div>
    <a href="#close" title="Fechar" class="close">X</a>
    <h2>Feliz natal!</h2>
    <img src="CASOQUEIRAIMAGEM.jpg"/><br>
<b>Boas festas!</b>
      </div>
</div>

E abra com a url #boasfestas 100% que vai funcionar.

Ajude o fórum! Antes de postar, leiam as regras de postagem aqui.

Link para o comentário
Compartilhar em outros sites
Visitante
Este tópico está impedido de receber novos posts.
 Compartilhar
Ir para a lista de tópicos

  • Quem Está Navegando   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.
×
×
  • Criar Novo...

Informação Importante

Concorda com os nossos termos?

  I accept