Les partenaires publicitaires:

Comment créer des boîtes de pop-up personnalisés avec javascript

Une des meilleures façons de lancer uniques, boîtes contextuels personnalisés est de construire un générateur pop-up. Une fonction javascript qui crée une commande contextuel personnalisé peut réduire le temps de programmation. En changeant quelques variables qui influent sur la taille et la fonctionnalité d'un pop-up, vous pouvez passer ces variables à la fonction de générateur contextuel. Cette fonction va traiter les variables et créer une méthode «ouverte» qui lance votre pop-up.

Instructions

  1. Lancez votre éditeur HTML et ouvrez un document HTML.

  2. Repérez «corps» de la section du document, puis collez le code HTML suivant:

    Cela crée un bouton qui appelle le générateur pop-up lorsque vous cliquez dessus.

  3. Passez à "tête" de la section du document, et ajouter ce code "script" si aucun existe:

  4. Ajouter ces déclarations de variables ci-dessous la première "script" tag:

    var url = "http://whitehouse.gov»;

    hauteur de var = "400";

    var largeur = "600"

    var top = "200";

    var gauche = "300";




    Réglez la valeur de la variable "URL" à toute URL que vous souhaitez. Si vous ne changez pas, le pop-up affiche le site de la Maison Blanche comme un exemple. Les variables de hauteur et largeur définissent la hauteur et la largeur de la fenêtre pop-up. Le "top" et "gauche" de dire au navigateur quelle mesure de placer le pop-up à partir du haut de l'écran et le bord de l'écran de gauche. Dans cet exemple, la fenêtre pop-up apparaîtra 200 pixels de haut et 300 pixels de la gauche. Les valeurs de hauteur et la largeur sont également en pixels.

  5. Ajouter ces déclarations de variables inférieurs à ceux montré à l'étape précédente:

    les barres de défilement var = "1" - / scrollbar /

    barre d'outils var = "1" - / barre d'outils /

    Lieu de var = "1" - / barre d'adresse /

    var barre de menu = "1" - / barre de menu /

    var barre d'état = "0";

    var redimensionnable = "1" / permettent à l'utilisateur de redimensionner la fenêtre /

    Ces variables vous permettent de montrer ou de cacher les différents composants du navigateur. Si la valeur d'une variable est "1", le composant apparaît. Si sa valeur est "0", le navigateur ne montre pas ce composant particulier. Dans cet exemple, le navigateur va afficher la barre de menu, car la valeur de "barre de menus" est "1." Le navigateur permet de masquer la barre d'état, car la valeur de la "barre d'état" variable est "0." Réglez ces valeurs quelque façon que vous aimez personnaliser l'apparence de la fenêtre pop-up.

  6. Collez la fonction javascript suivant après le code décrit dans la dernière section:

    popUpGenerator fonction () {

    var popUpString = '';

    popUpString + = 'height =' + hauteur;



    popUpString + = ', largeur =' + largeur;

    popUpString + = ', top =' top +;

    popUpString + = ', gauche =' + gauche;

    popUpString + = ', barres de défilement =' + barres de défilement;

    popUpString + = ', barre d'outils =' + barre d'outils;

    popUpString + = ', location =' + emplacement;

    popUpString + = ', barre de menu =' + barre de menus;

    popUpString + = ', status =' + barre d'état;

    popUpString + = ', redimensionnable =' + redimensionnable;

    window.open (URL, 'NewPopup', popUpString);

    }

    Ceci est le générateur pop-up. Il combine les variables définies précédemment et les utilise pour personnaliser la méthode "window.open" qui lance le pop-up.

  7. Enregistrez votre document HTML, et de l'ouvrir dans un navigateur. Cliquez sur le bouton "Afficher les Pop-up". Le pop-up apparaîtra.

Conseils Avertissements

  • Vous pouvez également utiliser «oui» et «non» au lieu de «1» et «0» lorsque vous spécifiez les valeurs des variables contextuelles.
  • Les navigateurs modernes ne peuvent pas cacher la barre d'adresse, même si vous choisissez de l'afficher.
  • Certains utilisateurs installent les bloqueurs de pop-up. Vos fenêtres pop-up ne seront pas ouvrir si le navigateur d'un utilisateur contient un bloqueur de pop-up.
» » » » Comment créer des boîtes de pop-up personnalisés avec javascript