Continue com a implementação simples JavaScript acima da janela de arrasto pop-up (i) para aprender.
A seguir, a análise específica do código:
Primeiro, vamos confirmar a estrutura:
Janela flutuante: inicialmente invisível. Inclui a barra de título e a barra de conteúdo, com barras de título e botões de fechamento dentro da barra de título.
Camada de máscara: invisível no início. Usado para definir o fundo translúcido quando a janela flutuante aparecer.
Botão: usado para clicar para aparecer a janela flutuante.
O seguinte explicará em detalhes
1. Para permitir que a janela se mova livremente, a posição da janela deve ser absoluta;
/*Login componente da camada flutuante*/. Pop -up {display: Nenhum; /*Ocultação inicial*/ largura: 380px; Altura: Auto; /*Alta liberdade, porque é incerto, quanto conteúdo é. */ borda: 1px Solid #D5D5D5; Antecedentes: #ffff; /*O conteúdo da janela é opaco, o fundo é branco*/ caixa de caixa: 0 0 3px rgba (0, 0, 0, 0,25); -moz-box-shadow: 0 0 3px rgba (0, 0, 0, 0,25); -Webkit-box-shadow: 0 0 3px rgba (0, 0, 0, 0,25); /*A janela de conteúdo é sombreada*/ Radio de fronteira: 8px; /* Todos os cantos usam cantos arredondados com um raio de 8px, esta propriedade é uma propriedade padrão CSS3*/ -moz-Border-Radius: 8px; /* Atributos privados do navegador Mozilla*/ -Webkit-Border-Radius: 8px; /* Atributos privados do navegador webkit*//* CANHORES RONAÇÕES DE JANEIRA*/ Posição: Absoluto; topo: 100px; Esquerda: 100px; /*posicionamento absoluto*/ z-index: 9000; }2. Adicione uma barra de título à janela e defina o cursor do mouse da barra de título na forma de arrastar (mover) (ao arrastar o Chrome, o cursor se tornará um cursor de texto e será restaurado após a liberação do botão do mouse). Aqui você precisa definir um canto arredondado para os cantos superior esquerdo e superior direito da barra de título.
/*Área da barra de título*/. Popup_title {altura: 48px; altura da linha: 48px; /*Center verticalmente*/ preenchimento: 0px 20px; /*Faça uma certa distância da esquerda*/ fundo: #f5f5f5; /*Cor de fundo*/ borda-bottom: 1px Solid #efefefef; /*Borda inferior*/ radio de borda: 8px 8px 0 0; /* Use cantos arredondados com raio de 5px no canto superior esquerdo e superior direito. Esta propriedade é uma propriedade padrão CSS3*/ -moz-Border-Radius: 8px 8px 0 0; /* Propriedade privada do navegador Mozilla*/ -Webkit-Border-Radius: 8px 8px 0 0; /* Propriedades privadas do navegador do webkit*//* Cantas arredondadas da janela*/ cor: #535353; Size da fonte: 16px; /* Cor da fonte e tamanho da fonte*/ cursor: mover; /* Estilo móvel*/ -moz-user-select: nenhum; / * Firefox all */ -webkit-user-select: Nenhum; /* Chrome all / safari all / opera15+* / -ms-user-select: nenhum; /* Ie10*/ -khtml-user-select: Nenhum; /* Navegadores anteriores*/ seleção do usuário: nenhum; -o-user-select: nenhum; /* Os dois atributos acima não são suportados atualmente, então eu os escrevi aqui para reduzir os riscos*/}Aqui estão alguns pontos de conhecimento a entender:
1. CSS3 (Radio de fronteira) Cantas arredondadas de fronteira
Radio de fronteira é um método de abreviação. Além disso, os quatro valores são definidos na ordem de canto superior esquerdo, superior direito, canto inferior direito, inferior esquerdo e canto inferior esquerdo. As principais situações ocorrerão nas seguintes situações:
1. Se houver apenas um valor, os quatro valores de canto superior esquerdo, superior direito, canto inferior direito e canto inferior esquerdo são iguais.
2. Existem dois valores, depois o canto superior esquerdo é igual ao fundo-direito e o primeiro valor é obtido; O canto superior direito é igual ao canto inferior esquerdo, e o segundo valor é tomado
3. Existem três valores, o primeiro valor é definir a esquerda superior; Enquanto o segundo valor é superior direito e canto inferior esquerdo e eles serão iguais, e o terceiro valor é definir o fundo direito.
4. Existem quatro valores, o primeiro valor é definir o canto superior esquerdo e o segundo valor é o topo direito, o terceiro valor direito e o quarto valor é definir o canto inferior esquerdo.
Navegadores suportados:
2. Cursor: Mova
A propriedade Cursor especifica o tipo de ponteiro (cursor) exibido.
Quando o valor da propriedade é movido, significa que o objeto referido por esse cursor é móvel, geralmente uma seta cruzada, como mostrado na figura.
3. User-Select: Usado para controlar a seletividade do conteúdo
Valor automático-padrão, o usuário pode selecionar o conteúdo no elemento
nenhum - o usuário não pode selecionar nenhum conteúdo no elemento
texto-o usuário pode selecionar o texto no elemento
Elemento - o texto é opcional, mas apenas dentro dos limites do elemento (suportado apenas pelo IE e FF)
Deve-se notar que o seleção do usuário não é um atributo padrão W3C CSS, e o navegador suporta-o incompletamente e precisa ser ajustado para cada navegador.
Descrição de seleção de usuário:
Define ou recupera se o usuário pode selecionar o texto.
(1) O IE6-9 não suporta essa propriedade, mas suporta o uso do atributo de tag onelectstart = "return false;" Para alcançar o efeito da seleção do usuário: nenhum; Safari e Chrome também suportam este atributo de tag;
(2) Esta propriedade não é suportada até o OPERA12.5, mas, como o IE6-9, também suporta o uso do atributo de tag privado unslectable = "ON" para obter o efeito do usuário seletivo: nenhum;
(3) outro valor não selecionado está desativado; Em outros navegadores, se o texto for definido como -MS-User-Select: Nenhum; Em outros navegadores, o usuário não poderá começar a selecionar o texto no bloco de texto.
No entanto, se o usuário começar a selecionar o texto em outras áreas da página, o usuário ainda poderá continuar selecionando o texto da área que define o texto como -s-user-seleção: nenhuma;.
Analise o seguinte código (NOTA: Este código e os resultados da análise deste código são do W3Help):
<! Doctype html> <html> <body> <div unselectable = "em" style = "background: #cc;" > não selecionado = em </div> <br/> <div style = "Background: #cc; -webkit-user-select: nenhum;" > -webkit-user-select: Nenhum; </div> <br/> <div style = "Antecedentes: #cc; -moz-user-select: nenhum;" > -Moz-user-select: Nenhum; </div> <br/> <div style = "Background: #cc;" ONSELECTSTART = "Return false;" > ONSELHECTSTART = "Return false;" </div> </body> </html>
Os efeitos em cada navegador são os seguintes:
Nota 1: o conteúdo pode ser desativado.
Nota 2: Nenhum conteúdo é proibido para ser selecionado.
Pode -se observar que o método para proibir a seleção de conteúdo é o seguinte:
Ou seja, definido unslectable = "on" para a tag e defina o método de tag onelectstart = "return false;"
O Firefox define estilos privados para tags -moz-user-select: Nenhum.
O Chrome Safari define um estilo privado para o tag -webkit-user-select: nenhum e define o método de tag onelectstart = "return false;".
Opera Conjunto Unslectable = "ON" para tags
Solução
Defina estilos para rótulos -moz-user-select: nenhum; -webkit-user-select: nenhum ao mesmo tempo, defina inalectável = "on" para garantir que todos os navegadores possam proibir a seleção de conteúdo.
Se você definir o estilo de seleção proibido para a barra de título da janela pop-up da diferença flutuante no caso, poderá defini-lo assim:
<div id = "popup_title" unslectable = "on"> login <a href = "javascript: hidepopup ();"> </a> </div>
.popup_title {-moz-user-select: nenhum; / * Firefox all */ -webkit-user-select: Nenhum; /* Chrome all / safari all / opera15+* / -ms-user-select: nenhum; /*Ie10*/ -khtml-user-select: Nenhum; /* Navegadores anteriores*/ seleção do usuário: nenhum; -o-user-select: nenhum; /*Os dois atributos acima não são suportados atualmente, escritos aqui para reduzir os riscos*/}Nota: Este artigo é original, endereço: http://www.cnblogs.com/wanghuih/p/5576910.html
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.