18073 sujets

Questions générales et questions de débutants

Faire apparaître des popups sans nouvelle fenêtre - Evolution

Aloha,

Je vous propose une petite évolution sans position:absolute pour ce tuto génial. Cela permet de placer les popus en face d'un texte ou d'une image, quand vos block sont extensibles en hauteur et largeur.

Tout est adapté du tutoriel de Raphaël. Smiley jap

Le .js
function pop()
{
    var myAs = document.getElementsByTagName('a');
    for (var a = 0; a < myAs.length; ++a) {
	// Si le lien a une classe de type pop
        if (myAs[a].className == 'pop') {
	// on extrait l'id de la popup à partir du href
            var pop = document.getElementById(myAs[a].href.substring(myAs[a].href.lastIndexOf('#') + 1));
	// si la popup existe on l'affiche (display block)
            if (pop) {       
                pop.style.display = 'none';
                myAs[a].onclick = function() {
                    thisPopup = document.getElementById(this.href.substring(this.href.lastIndexOf('#') + 1))
                    thisPopup.style.display = (thisPopup.style.display == 'none') ? 'block' : 'none';
                    return false;
                };
            }
        }
    }
}
 
window.onload = pop;


le .css
#pop1, #pop2, #pop3 {position:relative;
border:3px double black;
background:white;
cursor:pointer;
font-size:80%;
height:20px;
width:100px;
margin: -25px 0 0 150px;
}


le .html
<div id="produits">
			<h2>Produits - <a href="#pop1" class="pop"><img src="img/plus.gif" height="20" width="20" alt="plus" /></a></h2>
			<p id="pop1"><a href="#">Ajouter produit...</a></p>
		</div>

Doctype 1.0 Trans, testé sur FF & IE PC.

Le seul bémol, c'est le décélage des blocks suivants lors de l'affichage du <p>. J'ai pas encore cherché comment l'éviter. Si certains sont inspirés... Smiley langue
Modifié par kuvett (24 Jun 2005 - 10:47)
Salut kuvet,
je n'ai pas compris comment agit la fonction collapse. Au lieu de séparer les codes, pourrais_tu donner le code complet de ta page démo ou l'url ?
La page demo fait partie d'un projet professionnel encore un peu chaud, donc pas pour l'instant.

En fait, je me suis trompé de fonction, quelle buse ! C'est édité...
Sujet clos
Aller à