• popup CSS

    Si on souhaite afficher un descriptif complet au survol d'un élément (texte, image...), utiliser un code de popup javascript risque d'être bloqué par votre navigateur.

    On peut en réaliser un en CSS; l'intérêt est de pouvoir y placer des textes, images, vidéos, liens.. et de pouvoir donner le style choisi; l'inconvénient, est que cet élément, est fixe sur l'écran et ne suit pas la souris; cependant, sa position peut être définie et sa présentation est celle de votre choix.

    On peut survoler un bouton visible ou invisible pour faire apparaître un descriptif avec texte, image.

    On peut cliquer sur un bouton visible ou invisible pour faire apparaître un descriptif avec texte, image, iframe, vidéo, liens.

    Les codes indiqués sont ceux de cette page et comme elle comporte 2 montages identiques, j'espère que cela ne modifie pas trop les positionnements; sinon, je suis à votre service pour adapter à votre page car l'emploi de la position absolute n'est pas indispensable mais il faut adapter les positions.

    J'ai laissé volontairement le descriptif semi transparent pour clarté de l'explication; pour le rendre transparent, passer opacity:0.3; à opacity:0;

    Survol


    Un exemple:
    Le commentaire avec texte,
    image
    mais pas de lien car la fenêtre disparaît hors survol bouton

     


    Retour par clic hors bouton
    Texte, iframe
    image
    ou lien.

    Survol:
    <div style="text-align: center; height: 650px;"><img src="http://ekladata.com/mqZVas7xyZW9rXJ16mv7wWK1xMA.jpg" alt="" />
    <p id="pp1">Survol</p>
    <p id="pp2"><br />Un exemple:<br /> Le commentaire avec texte,<br /> image<img src="http://ekladata.com/bATKRPr-lPJI_GXxaHKM4SO9YT4.gif" alt="" /><br />mais pas de lien car la fen&ecirc;tre dispara&icirc;t hors survol bouton</p>
    </div>
    <style><!--
    #pp1{position:absolute; z-index:10; width:100px; text-align:center; font-size:14pt; border:1px solid black; border-radius:50px; background:pink; transform:translate(900px,-600px);}
    #pp2{position:absolute; z-index:5; width:500px; height:350px; border:3px double black;border-radius:50px; background:#A9F5D0; transform:translate(250px,-400px); opacity:0.3; text-align:center; font-size:20pt; transition:all 1s linear;}
     #pp1:hover ~ #pp2{opacity:1;}
    --></style>


    Clic:
    <div style="text-align: center; height: 650px;"><img src="http://ekladata.com/mqZVas7xyZW9rXJ16mv7wWK1xMA.jpg" alt="" /> <input id="pp3" type="text" value="Clic" /> <span id="pp4"><br />Retour par clic hors bouton<br /> Texte, iframe<br /> image<img src="http://ekladata.com/bATKRPr-lPJI_GXxaHKM4SO9YT4.gif" alt="" /><br />ou <a href="http://www.petitrandonneur.fr/" target="blank">lien.</a></span></div>
    <style><!--
    #pp3{position:absolute; z-index:10; width:100px; text-align:center; font-size:14pt; border:1px solid black; border-radius:50px; background:pink; transform:translate(-150px,0px);}
    #pp4{position:absolute; z-index:5; width:500px; height:350px; border:3px double black;border-radius:50px; background:#A9F5D0; margin:200px 0 0 -800px; opacity:0.3; text-align:center; font-size:20pt; transition:all 1s linear;}
    #pp3:focus ~ #pp4{opacity:1;}
    --></style>