Página Inteira Superposição Janela

Abraham Chaffin


	[Full Page Overlay Window] Tutoriais : Web Design Tutoriais Página Inteira Superposição Janela

A Creativecow webdesign tutorial

Página inteira janela pop-up superposição

Neste tutorial você vai aprender como criar uma página inteira de pop-up que um superposições existentes html Página. Esta técnica é usada muitas vezes para mostrar um vídeo, Filme arquivo, Imagem, Ou se formam quando um usuário clica em um elemento em uma página da web.

Abraham Chaffin
Creativecow.net,
Cambria, California E.U.A.

© 2008 Creativecow.net. Todos os direitos reservados.

Ver exemplo

Introdução

Essa técnica não é uma janela pop-up como um modo geral possa pensar. Não é uma janela separada do html browser que é aberta, mas sim uma div que as superposições existentes html Página. O div é semi-transparente e cria um bonito efeito que permite que o usuário saiba que eles podem voltar para a outra página, fechando a janela (div) que está no Topoo.

A realização deste método é bastante atrás em frente:

O estado inicial da div que irá sobrepor a página Está escondida com nenhum conteúdo no seu interior html. Isso significa que inicialmente não existe nada entre a abertura eo fechamento div tag div tag eo elemento tem um visor de nenhum.

Para iniciar a exibição dos div Você deve primeiro escolher e elemento que o usuário clicará, Pairar sobre, Etc. Para atribuir o comportamento de. Você pode até mesmo tê-lo iniciado quando a página carrega, se quiser. Geralmente você teria uma imagem, Botão, Ou de texto que um usuário clica para iniciar a função javascript.

Quando o div é exibida Pela função javascript é basicamente remover a exibição de nenhum valor para o valor de exibição em branco ou''que retorna aos elementos valor padrão que será exibido. Em segundo lugar, o div do interior html é preenchido com predefinidos html código que será o código que tem o que você deseja ser exibido na janela da superposição. Neste exemplo, teremos um vídeo dentro de uma tabela que ajuda a centrar o vídeo no centro da tela. Haverá também um botão Fechar para fechar a janela ou semi-transparente pop-up div.

Clicando no botão Fechar na janela pop-up Inicia a inversão do momento em que foi exibido. Ele atribui a div visor do valor de volta para o interior e apresenta nenhum html voltar para nada.

O código

Para iniciar aqui é o código do início ao fim e, em seguida, iremos passar por ele peça por peça:

!DOCTYPE  html  público "- / / W3C / / DTD XHTML 1.0 transitórias / / EN ""  http://www.W3.org  / tr/xhtml1/dtd/xhtml1-transitional.Dtd "
head
Estilo
# displaybox (
	Z-index: 10000;
	Filtro: Alpha (Opacidade = 50); / * ou seja, mais velhos * /
	Filtro:Progid:Dximagetransform.microsoft.Alpha (Opacidade = 50); / * ie * /
	-moz-opacidade: .50; / * idosos mozilla * /
	-khtml-opacidade: 0.5; / * safari idosos * /
	Opacidade: 0.5; / * apoiado pelo atual mozilla, Safari, E ópera * /
	Background-color:# 000000;
	Posição:Fixo; Topoo:0px; esquerda:0px; largura:100%; altura:100%; cor:# ffffff; Text-align:Center; vertical-align:Média;
}
/ Estilo
script
Clicker função () (
	Var = Thediv documento.Getelementbyid ( 'displaybox');
	If (Thediv.Estilo.Display == "none") (
		Thediv.Estilo.Display = "";
		Thediv.InnerHTML = " table width='100%' height='100%'   tr   td align='center' valign='middle' width='100%' height='100%'   object classid = "clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b 'codebase ='  http://www.apple.com  / qtactivex / qtplugin.Cab 'width ='640' height ='500 '   param name = "src" value = "  http:/ / cowcast.Creativecow.net  / after_effects/episodes/shape_tips_1_pod.Mp4 '   param name='bgcolor' value='#000000'   embed src = "  http:/ / cowcast.Creativecow.net  / after_effects/episodes/shape_tips_1_pod.Mp4 "auTopolay =" true "pluginspage = '  http://www.apple.com  / quicktime / download / 'height ='500' width ='640 'bgcolor = "# 000000"   / embed   / object   br   br   a href = "#" onclick =' return clicker ( ); '  fechar janela  / a   / td   / tr   / table  ";
	) else (
		Thediv.Estilo.Display = "none";
		Thediv.InnerHTML ='';
	}
	Return false;
}
/ script
/ head
body
div id = "displaybox" Estilo = "display: None ;"  / div
a href='#' onclick='return clicker();'  abrir janela  / a
/ body

Modo estrito

Esta linha de código é necessário na parte superior do documento para permitir modo estrito no ie7. Fixo posicionamento não é suportado no ie7 sem esta implementado e este tutorial não vai funcionar. Estar ciente também de que este pode não funcionar em todos os navegadores, como fixos posicionamento CSS é uma nova propriedade.

Css styling

Vamos ao longo do css estilo do div e ver o que o torna um semi-transparente div superposições que o resto da página:

Z-index do css propriedade é usada para elevar a camada em z espaço acima todos os outros elementos, tais como menus suspensos, Etc. Defini-la muito bem para 10000 garante que vai ficar acima maioria dos outros elementos que tenham definido um Z-index.

A parte mais difícil é pegar o semi-transparente div efeito em vários navegadores. Firefox, Internet Explorer, Safari, ópera, E até mesmo o google chrome = todos estes navegadores não usam o mesmo semi-transparente css propriedade conjunto. Ou seja, ele usa as configurações do filtro. Mozilla Firefox tem "-MOX-opacidade". E outros utilizam "opacidade", o que torna o mais sentido para mim e espero que se torne a norma no futuro.

A primeira linha "# displaybox ("Atribui o seguinte estilo para o elemento com o id displaybox.

Os próximos cinco linhas são diferentes formas de definir a opacidade para 50%
" Filtro: Alpha (Opacidade = 50); / * ou seja, mais velhos * / Filtro:Progid:Dximagetransform.microsoft.Alpha (Opacidade = 50); / * Ie * / -moz-opacidade: .50; / * mais velhos mozilla * / -khtml-opacidade: 0.5; / * mais velhos safari * / Opacidade: 0.5; / * apoiado pelo atual mozilla, Safari, E ópera * / "
Simplesmente muda a 5, .5 ou 50 valores para o que você gosta. O exemplo está definido para 50% de opacidade.

"Background-color:# 000000;"Naturalmente torna a cor de fundo preto e depois a 50% de transparência tornará cinzenta.

"Posição:Fixo;"Define o posicionamento a ser fixado não absoluta ou relativa no fluxo da página. Isto torna assim o elemento pode saltar para fora e outros elementos float acima e será fixado para a janela e não a página ou outros elementos. Posicionamento relativo coloca o elemento no fluxo da página e é movida e move outros elementos à sua volta. Absolutos flutua acima, mas é relativo à página que não a janela, Se você utilizar este o elemento que só fiquem no Topoo da página.

"Topo:0px; esquerda:0px; largura:100%; altura:100%;"Coloca o semi-transparente div no canto superior esquerdo e espalha-lo, na medida em que pode ir na janela.

"Text-align:Center; vertical-align:Média;"É a minha tentativa de início centro, os elementos dentro do div para o meio da página.

Javascript

Agora vamos dar uma olhada no javascript que faz com que o elemento mudar quando o usuário interage com a página e executa a função javascript:

script
Clicker função () (
	Var = Thediv documento.Getelementbyid ( 'displaybox');
	If (Thediv.Estilo.Display == "none") (
		Thediv.Estilo.Display = "";
		Thediv.InnerHTML = " table width='100%' height='100%'   tr   td align='center' valign='middle' width='100%' height='100%'   object classid = "clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b 'codebase ='  http://www.apple.com  / qtactivex / qtplugin.Cab 'width ='640' height ='500 '   param name = "src" value = "  http:/ / cowcast.Creativecow.net  / after_effects/episodes/shape_tips_1_pod.Mp4 '   param name='bgcolor' value='#000000'   embed src = "  http:/ / cowcast.Creativecow.net  / after_effects/episodes/shape_tips_1_pod.Mp4 "auTopolay =" true "pluginspage = '  http://www.apple.com  / quicktime / download / 'height ='500' width ='640 'bgcolor = "# 000000"   / embed   / object   br   br   a href = "#" onclick =' return clicker ( ); '  fechar janela  / a   / td   / tr   / table  ";
	) else (
		Thediv.Estilo.Display = "none";
		Thediv.InnerHTML ='';
	}
	Return false;
}
/ script

A primeira linha da função declara o nome da função "Clicker função () ("Para ser utilizado em toda a página.

"Var = Thediv documento.Getelementbyid ( 'displaybox'); " Estabelece o valor de "Thediv" variável para o div com o id de "displaybox". "Thediv" variável será utilizado através do resto da função, assim que o navegador não tem de voltar a obter o elemento displaybox.

"If (Thediv.Estilo.Display == "none") ("Diz basicamente, "Se neste momento não está sendo exibido Thediv fazer o que estou prestes a dizer-lhe."

Thediv tornar visível "Thediv.Estilo.Display = "";".

Queda nesta html em Thediv "Thediv.InnerHTML = "a href='#' onclick='return clicker();' fechar janela / a"". Inbetween as duas aspas aqui você iria colocar qualquer html pretende ser exibida. Lembre-se que ter uma outra citação [ "] vai acabar esta etiqueta assim que você deve usar aspas simples na sua html [ '] Ou escapar a [ "], usando uma barra [] na frente de todos os orçamentos e.g. [ "]. Você deve ter em algum lugar existe a possibilidade de fechar a janela novamente. Caso contrário o usuário vai ficar com a janela no Topoo da página, e não ser capaz de voltar.

") else ("Se a div foi visível, em seguida,...

"Thediv.Estilo.Display = "none";"Escondê-lo

"Thediv.InnerHTML ='';"E defina o seu conteúdo para nada.

"}"Fim do se outra declaração.

"Return false;"Return false para a função. Basicamente esta torna-lo para que o link não realmente ir para o destino do href quando você clicar sobre ela. Se você usar um método onclick em um link.

"}"Fim da função.

Fazê-lo funcionar

Para torná-lo efectivamente trabalham na página que você precisa ter o div na página escondido algures no início e algo para o usuário a clicar em:

O oculto displaybox div:

Um link que irá executar e devolver a função javascript "clicker onclick:

Ver exemplo

Isto deve te dar alguma idéia de como criar o efeito e também dar-lhe a compreensão suficiente para ajustar, Alterar, E manipulá-lo para ir para o seu próprio html layout. Apreciar!

FóRUNS • TUTORIAIS • MAGAZINE • SERVIçOS • VIDEOS • NOTíCIAS • BLOGS

© CreativeCOW.net Todos os direitos reservados.

Creative Comunidades do Mundo

[Topo]

English • العربية • 中文 • Français • Deutsch • עברית • हिन्दी • Italiano • 日本語 • Português • Русский • Español