            |
| FORUMS | TUTORIELS | MAGAZINE | SERVICES | VIDEOS | ACTUALITéS | BLOGS |
| ||
Pleine Page De Couverture FenêtreAbraham Chaffin
Pleine page fenêtre pop-up overlay Dans ce tutoriel, vous apprendrez comment créer une page entière fenêtre pop-up qui superpose une html page. Cette technique est souvent utilisé pour l'affichage d'une vidéo, Fichier vidéo, Image, Ou la forme quand un utilisateur clique sur un élément dans une page Web.
Voir par exemple IntroductionCette technique n'est pas une fenêtre pop-up, comme on pourrait pense généralement. Ce n'est pas une fenêtre séparée de la html navigateur est ouvert, mais plutôt un div overlays que les html page. La div est semi-transparent et crée un bel effet qui permet à l'utilisateur de savoir qu'ils peuvent obtenir à l'autre page en fermant la fenêtre (div) qui est en haut.L'accomplissement de cette méthode qui est assez simple: L'état initial de l'div overlay qui la page Est caché sans contenu dans son intérieur html. Ce qui signifie d'abord qu'il n'y a rien entre l'ouverture et la balise div div tag de fermeture et de l'élément a un affichage de none. De lancer l'affichage de la div Vous devez d'abord choisir et de l'élément que l'utilisateur cliquera sur, Survolez, Etc. D'affecter le comportement de. Vous pourriez même avoir de l'ouverture de chargement de la page où si vous voulez. En général vous avez une image, Bouton, Ou le texte que l'utilisateur clique sur d'ouvrir la fonction javascript. Lorsque la div est affiché Par la fonction javascript, il est essentiellement supprimer l'affichage de la valeur zéro à la valeur affichée de la vierge ou''qui renvoie aux éléments de valeur par défaut qui doit être affiché. Deuxièmement, la div du centre html est rempli d'prédéfinis html code qui sera le code qui a tout ce que vous souhaitez afficher dans la fenêtre de superPosition. Dans cet exemple, nous aurons une vidéo dans un tableau qui permet de centrer la vidéo dans le centre de l'écran. Il y aura également un bouton de fermeture pour fermer la fenêtre ou semi-transparent div pop-up. En cliquant sur le bouton de fermeture dans la fenêtre pop-up Amorce le renversement de quand il a été affiché. Il attribue la div d'affichage de la valeur à zéro et fixe l'intérieur html à rien. Le codePour commencer voici le code du début à la fin et puis on reviendra sur ce morceau par morceau:Mode strictCette ligne de code est nécessaire tout au début du document afin de permettre le mode strict dans ie7. Fixe le Positionnement n'est pas pris en charge dans ie7 sans cette mise en œuvre et ce tutoriel ne fonctionne pas. être conscient aussi que ce mai pas dans tous les navigateurs, tel que fixé de Positionnement est une nouvelle propriété css.Style cssLet's go sur le Style css du div et voir ce qui en fait une semi-transparent div overlays que le reste de la page:Le Z-index css propriété est utilisée pour élever le niveau de z-dessus tous les autres éléments tels que des menus déroulants, Etc. Fixant à 10.000 plutôt bien assure que vous allez obtenir au-dessus de la plupart des autres éléments qui ont défini une Z-index. La partie la plus difficile est de mettre le semi-transparent div effet sur plusieurs navigateurs. Firefox, Internet explorer, Safari, Opéra, Et même google chrome = o ne sont pas tous ces navigateurs utilisent les mêmes semi-transparent css propriété série. C'est-à-dire qu'il utilise les paramètres du filtre. Mozilla firefox a "-mox-opacité". Et d'autres utilisent «opacité» qui fait le plus de sens pour moi et nous l'espérons, deviendra la norme dans l'avenir. La première ligne "(# displaybox«Attribue le Style suivant à l'élément avec l'id displaybox. Les cinq prochaines lignes sont différentes manières de faire ensemble l'opacité à 50% " Filtre: Alpha (Opacité = 50); / * c'est-à-dire âgés * / Filtre:Progid:Dximagetransform.microsoft.Alpha (Opacité = 50); / * Ie * / -moz-Opacité: .50; / * âgées mozilla * / -khtml-Opacité: 0.5; / * âgées safari * / Opacité: 0.5; / * soutenu par l'actuel mozilla, Safari, Et de l'opéra * / " Suffit de Changerr les 5, .5 ou 50 valeurs de ce que vous aimez. L'exemple est fixé à 50% d'opacité. "Background-color:# 000000;"Bien sûr fait de la couleur de fond noir et puis les 50% de transparence permettra de gris. "Position:Fixe;"Établit le Positionnement fixe pas d'être absolue ou relative dans le flux de la page. Cela fait-il si l'élément peut sauter et de flotter au-dessus d'autres éléments et il est fixé à la fenêtre et non pas la page ou d'autres éléments. Positionnement relatif met l'élément dans le flux de la page et se déplace et se déplace autour de lui d'autres éléments. Absolu au-dessus des flotteurs, mais est relative à la page de la fenêtre, Si vous avez utilisé ce que l'élément de rester en haut de la page. "Haut:0px; gauche:0px; largeur:100%; hauteur:100%;"Lieux semi transparent div dans le coin supérieur gauche et il se propage dans la mesure car elle peut aller à travers la fenêtre. "Text-align:Center; vertical-align:Milieu;"J'ai le début de la tentative de centre éléments intérieur de la div au milieu de la page. JavascriptMaintenant, nous allons jeter un coup d'oeil à la javascript qui rend l'élément de Changerment lorsque l'utilisateur interagit avec la page et exécute la fonction javascript:La première ligne de la fonction déclare le nom de la fonction "Clicker fonction () ("À utiliser dans toute la page. "Var = Thediv document.GetElementById ( 'displaybox'); " Définit la valeur de "Thediv variable de la div avec l'identifiant de" displaybox ". "Thediv" variable sera utilisée dans le reste de la fonction de sorte que le navigateur n'a pas à re-obtenir le displaybox élément. "If (Thediv.Style.Affichage == "none") (»Dit l'essentiel, "si aujourd'hui Thediv n'est pas affiché faire ce que je m'apprête à vous dire." Thediv rendre visible "Thediv.Style.Display = "";". Baisse de ce html dans Thediv "Thediv.InnerHTML = "a href='#' onclick='return clicker();' fermer la fenêtre / a"". Entre les deux guillemets ici mettre ce que vous voulez html vous souhaitez afficher. Rappelez-vous que le fait d'avoir une autre citation [ »] va mettre fin à cette étiquette, vous devez donc utiliser des guillemets simples dans votre html [ '] Ou échapper à la [ "] à l'aide d'un anti-slash [] en face de tous les prix e.g. [ »]. Il faut qu'il y ait quelque part dans la capacité de fermer la fenêtre. Sinon, l'utilisateur reste bloqué à la fenêtre en haut de la page et de ne pas être en mesure de revenir. ") else ("Si le div est visible alors... "Thediv.Style.Display = "none";«Cacher "Thediv.InnerHTML ='';»Et son contenu à rien. "}"Fin de la déclaration si l'autre. "Return false;"Return false pour la fonction. De ce fait l'essentiel de façon à ce que le lien ne pas aller à la destination de l'href lorsque vous cliquez sur celle-ci. Si vous utilisez une méthode onclick sur un lien. "}"Fin de la fonction. Faire fonctionnerPour en faire réellement le travail dans la page que vous avez besoin d'avoir quelque part dans la div de la page cachée au début et à quelque chose pour l'utilisateur de cliquer sur:Cachés displaybox div: Un lien qui sera exécuté et le retour de la fonction javascript onclick clicker: Voir par exemple Cela devrait vous donner une idée de comment créer cet effet, et aussi vous donner assez de compréhension pour régler, Changer, Et les manipuler pour aller dans votre propre html layout. Apprécier! | |||||||||||||
|
FORUMS • TUTORIELS • MAGAZINE • SERVICES • VIDEOS • ACTUALITéS • BLOGS © CreativeCOW.net Tous les droits sont réservés. Communautés créatives du monde [Haut] English • العربية • 中文 • Français • Deutsch • עברית • हिन्दी • Italiano • 日本語 • Português • Русский • Español |
