Novidades100 - Dicas de Internet e Computador
CulináriaInternetDetonadosWallpapersPoesiasVideos

Exibir Pop'Ups na Sua Página da Web

Várias Formas de Popup's, Inclusive em Formulários

Veja como editar aquelas janelinhas que às vezes tornam-se muito necessárias para expor algum conteúdo extra-página como ajuda, mensagens programadas, ou qualquer outra informação que nelas se tornam mais eficazes. Veja também como criar função js para exibir popup's através de formulários.
VEJA AQUI o exemplo de modêlo de popup.

Para editar com Imagem

novidades100.com.br

Código do Link (Com Imagem)

Primeiramente crie um pasta no servidor local com o nome de popups, em seguida crie outra pasta dentro desta primeira com o nome de php. Este será o caminho http://localhost/popups/php/.
Crie ainda uma outra pasta chamada de images dentro da pasta popups e dentro dela adicione um imagem com o nome de button.jpg (a extensão da imagem deve ser .jpg). Este será o caminho completo para a imagem: http://localhost/popups/images/button.jpg.
Agora copie o código abaixo e salve-o na pasta php, atribua a este arquivo o nome de popup.html

<html>
<head><title>Editar Pop'Ups - Exemplos de Popup</title>
<meta-name="robots" content="noindex">
<style type="text/css">
body{width:98%;padding:1%;margin:0px;background:#ff0;color:#00f;font-size:80%;}
img{98%;border:0px;margin:1%;float:center;}
h1{text-align:center;}
p{text-align:center;margin:0px;}
</style>
<body>
<h1>Teste de Popup</h1>
<img src="../images/button.jpg" alt="Teste" title="Teste">
<p>Isto é um teste - Isto é um teste - Isto é um teste - Isto é um teste - Isto é um teste - Isto é um teste - Isto é um teste - Isto é um teste - Isto é um teste - Isto é um teste - Isto é um teste - Isto é um teste - Isto é um teste - Isto é um teste - Isto é um teste - Isto é um teste .</p>
</body>
</html>

Em seguida copie o código abaixo, cole em Bloco de Notas e salve-o como teste.html dentro da pasta popups.

<a href="#" onclick="window.open('php/popup.php','popup','width=300,height=300,left=700,top=100');"><img src="images/button.jpg" alt="novidades100.com.br" title="novidades100.com.br"></a>

Para editar com Botão

Para Editar (com Botão)

Copie o código abaixo e cole no arquivo já salvo teste.html - Não é necessário cobrir o primeiro código, cole abaixo dele.

<button onclick="window.open ('php/popup.php','popup','width=468,height=530,left=300,top=20');">Botão de Pop'Up</button>

Para editar com Texto

Isto é um exemplo de popup…

Para Editar (com Texto)

Copie o código abaixo e cole em teste.html - Abaixo dos outros salvos anteriormente.

<p><a href="#" onclick="window.open('php/popup.php','popup','width=280,height=600,left=700,top=0');"> Isto é um exemplo de popup…</a></p>

Para Abrir sem Clicar, Apenas Passando o Mouse sobre a Imagem, Botão ou Texto

Para Editar (com botão, abrindo quando o mouse passa sobre ele)

Copie o código abaixo e salve no arquivo teste.html.

<button onmouseover="window.open('php/popup.php','popup','width=280,height=640,left=700,top=0');"> <h1>button</h1></button>

Abrir Página Simultâneas com Popop's

Para abrir uma página simultaneamente em um popup copie o código a seguir e salve no arquivo teste.html - Click no botão abaixo para ver exemplo.

<Click no Link>
LINK COM POPUP

Para Editar

Abaixo o código do exemplo acima. Copie e cole no arquivo teste.html.

<a href="php/popup.php" onclick="window.open('php/popup.php','popup','width=500,height=500,left=100, top=100');"><img src="images/button.jpg" alt="novidades100. com.br" title="novidades100.com.br"></a>

Abrir Popup's em Formulários

Veja abaixo um exemplo de como editar popup's em formulários, fazendo com que a janela fique de acordo com suas pretenções de posicionamento, tamanho e aparência.
Faça um Teste Abaixo - Digite seu Nome

Criar Arquivo Php

Para executar este tipo de popup é necessário que o Servidor Local trabalhe com extensões .php.
Se este for o seu caso, copie o código abaixo e salve-o dentro da pasta php com o nome de myname.php.

<!DOCTYPE HTML>
<html>
<head><title>Resposta Form Popup</title>
<meta name="robots" content="noindex">
<meta charset="UTF-8">
<style type="text/css">
body{width:98%;background:#ff0;padding:1%;color:#00f;margin:0px;font-size:130%;}
</style>
</head>
<body>
<?php
$nome = $_POST['nome'];
echo "Olá ".$nome." você aqui no site? Espero que goste e volte sempre!";
?>
</body>
</html>

Agora copie o código a seguir e salve no arquivo teste.html.

<script type="text/javascript">
function openForm(popup,myPopup,features) {
window.open(popup,myPopup,features);
}
</script>
<b>Digite seu Nome</b><br>
<form id="myForm" method="POST" action="php/myname.php" name="myPopup" target="popup" onSubmit="openForm ('about:blank','popup','width=600,height=300')">
<input type="text" size="25" name="nome" maxlength="20">
<input type="submit" value="Enviar">
</form>

Estes são são alguns exemplos de popups que devem ser usados com cautela já que não são muito bem aceitos pelos usuários, além do que os navegadores costumam bloqueá-los por padrão.

Pop'Up, Pop'Ups, Página Web, Janelinhas, Conteúdo

Pressione CTRL + D para Adicionar Esta Página aos Seus Favoritos

Sobre o Autor| Política de Privacidade

Nosso site utiliza cookies e outras tecnologias para melhorar sua experiência ao utilizar nosso conteúdo, além de personalizar publicidades e outros serviços de acordo com seus interesses.