Novidades100 - Exibir Pop'Ups na Sua Página da Web
CulináriaDetonadosInternetPoesiasWallpapersWeb Tools

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.webp (a extensão da imagem deve ser .webp). Este será o caminho completo para a imagem: http://localhost/popups/images/button.webp.
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.webp" 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.webp" 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.webp" 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>
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

Compartilhar Exibir Pop'Ups na Sua Página da Web no WhatsApp
Compartilhar Exibir Pop'Ups na Sua Página da Web no Facebook
Entar em Contato com o Suporte
Sobre o Autor| Política de Privacidade