Salutation Artemus24
Personnellement je n'irai pas à l'encontre des suggestions de Tony Monast. En fait ce que tu demande ressemble étrangement à du « very old javascript », mais bon ça t'appartiens.
Je te donne ici un script vraiment basic qui ouvre un popup stylisé via CSS à partir de son parent (une fenêtre de lancement). Ce script comprend donc trois fichiers.
1 ) Le fichier de lancement de la popup (lanceurPopup.html) : celui-ci contient une fonction basic javascript nommé popup. C'est à partir de ce fichier que la popup est stylisé via CSS. C'est aussi ce fichier que tu lance au navigateur. La popup est onload sur l'élément BODY. J'ai fait simple, car le contexte d'aide oblige. C'est une base.
2 ) La popup (popup.html) elle même ne contient strictement rien, elle est blanche et vide. elle n'a même pas de !DOCTYPE, quoique cette fenêtre pourrait contenir le !DOCTYPE ou même plus. C'est que le !DOCTYPE est écrit dans la fonction popup du fichier lanceurPopup.html, au cas où celui-ci devait changer. Celui-ci est resizable, de même pour le CSS. Ce sera donc à toi d'écrire un CSS qui s'adaptera à tes besoins de redimensionnement.
3 ) Un fichier CSS nommé popup.css et placer dans un répertoire nommé css. Comme tu peut le voir l'adresse sera donc « href='css/popup.css' » de l'élément link.
Fichier lanceurPopup.html » Remarque ici que le fichier a un !DOCTYPE xHTML, par contre il lance une popup dont le !DOCTYPE est HTML 4.01. De même remarque que la cible CSS fait partie de page.document.write () avec l'élément link.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Je lance une popup</title>
<script type="text/javascript">
function popup()
{
page=open("",'popup','width=470,height=300,toolbar=no,scrollbars=no,resizable=yes');
page.document.write("<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>");
page.document.write("<html><head><title>popup</title><link rel='stylesheet' type='text/css' href='css/popup.css' /></head>");
page.document.write("<body><div><h1><b>Popup stylisé à partir du parent avec CSS</b></h1></div></body></html>");
page.moveTo (250, 250);
}
</script>
</head>
<body onload="popup ('popup.html', 'page')">
</body>
</html>
Ensuite le fichier popup.html » Tu prépare ce fichier sans !DOCTYPE puisque celui-ci est défini dans la fonction javascript du fichier lanceurPopup.html. En fait ce fichier est toalement vide, et vide de tout. Tout blanc.
Et le fichier CSS : popup.css dans le répertoire css.
body {
font-size:1.0em;
font-family:sans-serif;
color:#333333;
margin:0;
padding:0;
background:#333333;
width:100%;
}
div {
height:auto;
background:#ff0000;
border-bottom:2px solid #ffffff;
padding:5px;
}
h1 {
font-size:1.0em;
color:#000000;
text-align:center;
}
b {
font-weight:bold;
}
Voilà . . . Tu devrais avoir ceci comme résultat
Cependant je ne tiens pas à quitter le topic sans te mettre en garde envers ce « old script model » que je ne recommande pas. Par contre comme il s'agit de stylisé des petites fenêtres, c'est encore acceptable.
Tu pourras fignoler la fonction avec des paramètres plutôt que sans paramètre.
fonction popup (cible, largeur, hauteur, redimension, etc, etc) { // instructions }
Ne prend pas le vieux popup de l'époque révolue. Prend la suggestion de Tony Monast et tourne toi vers demain. Moi perso je te suggère la Bible JavaScript 7ième édition dont la presque totalité des exercices sont HTML5. Javascript a beaucoup changé, et surtout tu es débutant. Donc commence avec la septième édition de la Bible JavaScript.
En PDF ce volume (anglais) a 2044 pages. Un moyen monstre pédagogique je te le jure.
Essais d'écrire une ou plusieurs fonctions plus évoluées, et de les cibler en externe, plutôt que défini en entête du fichier HTML. N'oubli pas que la fenêtre popup pourra servir à tous les scripts ouvrant une popup et stylisé différemment. La réalité veut que tu n'es qu'une seule fenêtre popup pour tous tes représentations de popup. C'est la qualité de ta fonction popup (paramètrable) qui fera le reste. Une seule fenêtre, et un million de popup's.
Tu peut embarquer tous les éléments HTML. images, textes, objet (flash), formulaire et script tout genre (javascript, JQuery, etc). Bref tout fichier de script pouvant être cibler en externe.
Bonne chance
..
Modifié par zardoz (05 Jul 2011 - 07:18)