1. Introdução
Nesta lição, não revelarei o segredo para designers de layout experientes e gurus de CSS, mas este artigo será útil para iniciantes. é aqui que você pode aprender a criar pop-ups sobre um site inteiro.
Na maioria das vezes, essas janelas aparecem após a execução de determinadas ações no site, por exemplo, o usuário clica no link "Solicitar uma chamada de retorno" e um formulário de pedido é exibido na frente dele.
É muito conveniente usar janelas PopUp em conjunto com o ajax, mas este é o tópico de outra lição.
Mais e mais recursos da Web estão começando a aparecer na rede que usam pop-ups PopUp. Como exemplo, podemos oferecer a todos as redes sociais familiares.
Todos os dados em excesso das capturas de tela são excluídos.Vkontakte
Facebook
Twitter
Eu acho que existem razões suficientes para começar a estudar a questão: como fazer o PopUp aparecer no seu site.
Declaração do problema (TOR)
Você precisa criar uma janela pop-up com uma tela escurecida por todo o site.
Solução
Método 1
html
<div class="b-container"> Sample Text </div> <div class="b-popup"> <div class="b-popup-content"> Text in Popup </div> </div>
css
*{ font-family: Areal; } .b-container{ width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; } .b-popup{ width:100%; height: 2000px; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; } .b-popup .b-popup-content{ margin:40px auto 0px auto; width:100px; height: 40px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; }
Resultado:
Muitas vezes eles sugerem o uso de:
position:absolute;
Sim, o resultado é semelhante, mas devido ao fato de termos definido a altura do bloco "escurecimento", as barras de rolagem são exibidas. É por isso que esse método não é adequado.
Método 2
Esse método não difere fundamentalmente do método 1, mas acho mais conveniente.
Html (sem alteração)
<div class="b-container"> Sample Text </div> <div class="b-popup"> <div class="b-popup-content"> Text in Popup </div> </div>
Css
*{ font-family: Areal; } .b-container{ width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; } .b-popup{ width:100%; min-height:100%; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; } .b-popup .b-popup-content{ margin:40px auto 0px auto; width:100px; height: 40px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; }
O resultado é semelhante.
Devido à propriedade:
altura mínima: 100%; nosso bloco de escurecimento adquiriu uma largura de 100% e uma
altura mínima de 100% da tela.
A única desvantagem desse método é que o Internet Explorer suporta essa propriedade somente da versão 8.0.
Adicionando Magic ao Jquery
Agora adicione links para ocultar / mostrar nosso pop-up.
Para fazer isso, você precisa conectar a biblioteca jQuery e um pequeno script:
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script> <script> $(document).ready(function(){
Você também precisa atualizar o Html:
<div class="b-container"> Sample Text <a href="javascript:PopUpShow()">Show popup</a> </div> <div class="b-popup" id="popup1"> <div class="b-popup-content"> Text in Popup <a href="javascript:PopUpHide()">Hide popup</a> </div> </div>
Resultado
Agora, quando a página for carregada, a janela pop-up do PopUp desaparecerá.
Se clicarmos no link "Mostrar pop-up", uma janela pop-up será exibida. E se você clicar no link "Ocultar pop-up", a janela pop-up desaparecerá novamente.
O resultado pode ser visto aqui:
http://jsfiddle.net/p7NbX/15/