O princípio do uso de pop-ups div para exibir conteúdo dinamicamente: primeiro, use CSS e HTML para ocultar o conteúdo nos pop-ups e, em seguida, use o JavaScript (jQuery neste tutorial) para exibi-los dinamicamente. Esse efeito não apenas faz uso total do espaço de layout limitado, mas também melhora a experiência do usuário; Mais importante, isso não afeta o efeito SEO (porque realmente existe na página, mas é inicialmente invisível)
1. Defina uma div na página HTML e implemente o que precisamos exibir na div.
A cópia do código é a seguinte:
<Body>
<div id = "login">
<H2> <img src = "Images/Close.png"/> Login do site </h2>
<form id = "loginform">
<div> </div>
<div> conta: <input type = "text" name = "user" /> </div>
<div> Senha: <input type = "senha" name = "pass" /> </div>
<div> <input type = "button" name = "sub" value = "" /> </div>
</morm>
<div> Registre novo usuário | Esqueceu sua senha? </div>
</div>
</body>
Uma imagem vale mais que mil palavras. Vamos dar uma olhada na captura de tela do efeito desta janela pop-up da div:
2. O estilo CSS que eu uso
A cópia do código é a seguinte:
#Conecte-se {
Largura: 350px;
Altura: 250px;
borda: 1px sólido #ccc;
Posição: Absoluto;
exibição: bloco;
Z-Index: 9999;
Antecedentes: #FFF;
}
#Login H2 {
Altura: 40px;
altura da linha: 40px;
Alinhamento de texto: centro;
Size da fonte: 14px;
Espacamento de cartas: 1px;
Cor:#666;
Antecedentes: URL (imagens/login_header.png) repetir-x;
margem: 0;
preenchimento: 0;
fundo de borda: 1px sólido #ccc;
Cursor: Mova;
}
#Login H2 img {
Float: Certo;
Posição: relativa;
topo: 14px;
Direita: 8px;
Cursor: Ponteiro;
}
#Login div.info {
preenchimento: 10px 0 5px 0;
Alinhamento de texto: centro;
Cor: Maroon;
}
#Login div.User, #Login div.pass {
Size da fonte: 14px;
Cor:#666;
preenchimento: 5px 0;
Alinhamento de texto: centro;
}
#Login input.text {
Largura: 200px;
Altura: 25px;
borda: 1px sólido #ccc;
Antecedentes: #FFF;
Size da fonte: 14px;
}
#Login .Button {
Alinhamento de texto: centro;
preenchimento: 15px 0;
}
#Login input.submit {
Largura: 107px;
Altura: 30px;
Antecedentes: URL (Images/Login_button.png) No-REPEAT;
fronteira: nenhuma;
Cursor: Ponteiro;
}
#Login .Other {
Alinhamento de texto: à direita;
preenchimento: 15px 10px;
Cor:#666;
}
A principal coisa a ser observada aqui é a definição do estilo div, porque precisamos centralizar a exibição, usamos a posição absoluta de posicionamento: absoluto; Em segundo lugar, como é uma camada pop-up, a div deve estar na periferia mais externa, portanto o índice z geralmente é definido como muito grande, aqui o definimos como z-índice: 9999; Outro ponto é que a divisão em si está oculta e precisa ser definida para exibir: nenhuma, mas aqui precisamos olhar diretamente o efeito, para que possamos exibi -lo diretamente usando o Display: Block;
3. Precisamos deixá -lo exibido em um centro, para que primeiro devemos obter a altura e a largura do navegador. Se houver um deslocamento horizontal ou vertical da barra de rolagem, também precisamos obter o comprimento e obter a posição da div até o navegador através do cálculo.
A cópia do código é a seguinte:
$ (documento) .ready (function ()
{
jQuery.fn.extend ({
Centro: função (largura, altura)
{
Retorne $ (this) .css ("esquerda", ($ (janela) .width ()-largura)/2+$ (janela) .ScrollLeft ()).
css ("top", ($ (janela) .Height ()-altura)/2+$ (janela) .scrolltop ()).
CSS ("largura", largura).
CSS ("altura", altura);
}
});
});
Deixe -o mostrar clicando no botão
A cópia do código é a seguinte:
$ (". Login"). Clique (função ()
{
$ ("#login"). Show (). Center (350.250); // Mostra a caixa de login
});
Diagrama de reprodução
4. Pode arrastar e soltar a estrutura pop-up
Implementação de código
A cópia do código é a seguinte:
$ (documento) .ready (function ()
{
jQuery.fn.extend ({
// Função de arrastar e soltar
arrastar: function () {
var $ tar = $ (this);
retornar $ (this) .mousedown (função (e) {
if (e.target.tagname == "h2") {
var diffx = e.clientX - $ tar.offset (). esquerda;
var diffy = e.clienty - $ tar.offset (). top;
$ (documento) .mousemove (função (e) {
var esquerdo = e.clientX - diffx;
var top = e.clienty - diffy;
if (esquerda <0) {
Esquerda = 0;
}
caso contrário, se (esquerda <= $ (janela) .ScrollLeft ()) {
esquerda = $ (janela) .ScrollLeft ();
}
caso contrário, se (esquerda> $ (janela) .Width () +$ (janela) .ScrollLeft () - $ tar.width ()) {
Esquerda = $ (janela) .Width () +$ (janela) .ScrollLeft () -$ tar.width ();
}
if (top <0) {
top = 0;
}
caso contrário, if (top <= $ (janela) .scrolltop ()) {
top = $ (janela) .Scrolltop ();
}
caso contrário, if (top> $ (janela) .Height () +$ (janela) .Scrolltop () - $ tar.Height ()) {
top = $ (janela) .Height () +$ (janela) .Scrolltop () - $ tar.Height ();
}
$ tar.css ("esquerda", esquerda + 'px'). css ("top", top + 'px');
});
}
$ (documento) .mouseup (function () {
$ (this) .unbind ("mousemove");
$ (this) .unbind ("mouseup")
});
});
}
});
});
Aqui, clicamos e arrastamos apenas os elementos H2 no conteúdo da div. Se a divisão global for necessária, poderá ser modificada. O princípio do arrasto: quando o mouse pressionar o elemento especificado, obtenha as coordenadas do ponto do mouse e, através do cálculo, a imagem também é movida para a posição correspondente. Depois que o mouse clicar para cancelar, o evento de imprensa correspondente será cancelado e a página ainda estiver.
Chame o método de arrasto
A cópia do código é a seguinte:
$ ("#login"). drag ();
Agora podemos clicar na barra de título da caixa pop-up e arrastá-la no navegador à vontade.