En-tete Astuces divers html et css
Classic Moderne

Créer une fenêtre pop-up:

But : ouvrir une nouvelle fenêtre de dimension fixe quand on clique sur un lien.
A l'intérieur de cette nouvelle fenêtre, on dispose d'un bouton permettant de la refermer.

Moyen : Cela se fait avec des instructions en JavaScript en 2 étapes :

1 - création du lien dans la Première page :
Copier-coller le Premier code HTML suivant dans la partie BODY à l'endroit désiré du déclenchement de l'ouverture de la page.


<p>
<a href="popup.html" target="wclose" onclick="window.open('popup.html','wclose', 'width=380,height=350,toolbar=no,status=no,left=20,top=30')" >

Essai de Fenêtre pop-up

</A>
</p>


On remplacera popup.html par le nom de la page que l'on veut ouvrir.
Attention de bien modifier les deux endroits ci-dessus

Ne pas oublier l'adresse du lien après onclick="window.open('popup.htm'qui serviras à ouvrir la fenêtre.


Remplacer "Essai de Fenêtre pop-up" par le nom du bouton de déclenchement choisi.

Voir le déclenchement ci-dessous en rouge.


Essai de Fenêtre pop-up


PS : les dimensions sont modifiables (width=380,height=350),
de même que l'emplacement de la fenêtre (left=20,top=30).

2 - création de la deuxième page popup.htm :
- créer une nouvelle page que l'on nomme popup.htm, ou le nom indiqué dans votre première page.html
- copier-coller le deuxième code HTML suivant dans la partie BODY, en générale en bas de page.
Pour fermer la fenêtre pop-up :


<form method="post"> <p align="center"> <input type="button" name="B1" value="Fermer la fenêtre" onClick="window.close()"></p> </form>
Voici créé le bouton qui servira à fermer la fenêtre Pop-up.


C'est tout de même simple !!!









Haut-de-Page