Les sujets:

Les partenaires publicitaires:

Réponses populaires

Questions connexes

Les partenaires publicitaires:

Comment faire Lightbox apparaissant au-dessus Autres objets

Une visionneuse est un plugin jQuery utilisé pour superposer des images ou des galeries sur une page Web, et il est également connu comme une fenêtre modale. Pré-Fait scripts lightbox comprennent généralement une feuille de style qui définit la façon dont la visionneuse apparaît. Par défaut, la visionneuse est programmé pour apparaître au-dessus tous les autres contenus sur une page Web, mais dans certains cas, un élément peut refuser de coopérer. Ceci est un problème commun avec des éléments Flash ou des curseurs d'image. L'ordre dans lequel les éléments sont posés est contrôlé par la "z-index" propriété dans la feuille de style CSS.

Instructions

  1. Assurez-vous que le plugin visionneuse que vous avez choisi est installé correctement. Un lien vers la feuille de style doit être présent dans la tête de votre page et de regarder quelque chose comme ceci:

  2. Ouvrez la feuille de style contenant les styles lightbox. Situer le sélecteur primaire qui contrôle la fenêtre de la visionneuse et le revêtement de fond. Dans le cas du plugin jQuery lightBox originale, les sélecteurs sont appelés "# jquery-overlay" et "# jquery-lightbox." UN "z-index" propriété doit exister dans les deux déclarations. Par exemple, la fenêtre jQuery lightBox est réglée à une valeur de "100":

    jquery-lightbox {
    Position: absolute-
    top: 0-
    gauche: 0-
    largeur: 100% -
    z-index: 100-



    text-align: Center-
    line-height: 0-

    }

  3. Changer la "z-index" La valeur de "8999" pour la superposition et "9999" pour la fenêtre. Ces chiffres anormalement élevés devraient garantir la visionneuse est placée au dessus de tous les autres éléments.

  4. Utilisez Opera ou installer le Firebug add-on pour Firefox à partir de l'add-on officiel répertoire. Cliquez-droit sur l'élément de recouvrement, puis choisissez "Inspecter l'élément." Une fenêtre apparaîtra vous montrant le style de code HTML et CSS se rapportant à l'élément pour vous aider à déterminer quel fichier les styles sont ainsi que la classe qui est utilisé pour contrôler l'élément. Si vous travaillez avec un plugin WordPress ou un thème CMS qui inclut une visionneuse, la CSS de la visionneuse peut être inclus dans le cadre de la CSS du thème.

  5. Téléchargez et ouvrez le fichier contenant le style CSS de l'élément de problème. Si cet élément fait partie d'un plugin ou un thème que vous ne voulez pas modifier directement, vous pouvez dupliquer le style en feuille de style de votre site Web. Changer la "z-index" propriété sur un nombre inférieur à 9998, et d'ajouter "! important" à la ligne pour indiquer au navigateur de donner cette déclaration priorité. Par example:

    .adbox {

    z-index: 500 important-

    }

Conseils & Avertissements

  • Remplacer les éléments flash, tels que des curseurs et des blocs d'annonces, avec jQuery ou HTML5 homologues pour éviter les comportements chevauchement ou étrange. En utilisant le même type de script pour tous vos éléments interactifs assure également une meilleure compatibilité et la convivialité.
  • Toujours utiliser plugins jQuery avec la même version de dépendance ou pas de dépendance afin d'éviter les conflits.

Questions connexes

» » » » Comment faire Lightbox apparaissant au-dessus Autres objets