Lorsqu'on travaille sur un site web, on a tendance à utiliser le alert JavaScript pour ne pas se compliquer la vie. Très moche (un peu moins sur les dernières versions de Firefox), ce popup ne fait pas "sérieux" aujourd'hui :
Du coup, pour se donner une meilleure image, il est recommandé de créer un beau popup en HTML qui fera passer votre site pour un site de super pro. 
Seulement voilà, c’est plus facile à dire qu’à faire, surtout avec tous les navigateurs qui existent et leurs comportements différents...
Je vais donc vous expliquer comment faire, à l’aide d’un simple code HTML, CSS et jQuery.
Tout d’abord, on va définir le style du div qui fera toute la page, et qui servira à griser le fond (pour éviter que l’utilisateur ne puisse continuer à utiliser la page sans avoir cliqué sur valider). Le bon goût veut que ce div soit transparent, pour ne pas perdre l’utilisateur. Voici le style css de ce div :
#grayBack
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
z-index: 1999;
opacity: 0.5;
}
On va, dans un premier temps, ne pas l’insérer dans le HTML de notre page. On ne l’insèrera que lorsqu’on aura besoin de lui.
Maintenant, nous devons créer un beau popup HTML avec une largeur fixe. Voici son code HTML :
<div id="customPopup">
<h3>Titre du popup</h3>
<p>Message du popup !</p>
<p> </p>
<input type="button" value="Ok" onclick="hidePopup();" />
</div>
Et son style :
#customPopup
{
position: fixed;
display: none;
left: 50%;
top: 50%;
z-index: 2000;
padding: 20px;
width: 560px;
background-color: #EEEEEE;
font-size: 12px;
line-height: 16px;
color: #202020;
border : 3px outset #555555;
}
Voilà, nous avons fait le plus dur facile. Maintenant, il nous faut un beau lien (ou un bouton, comme vous préférez) qui fera apparaître notre popup, à l’aide d’une méthode JavaScript :
<a href="javascript:showPopup();" title="Montrer le popup">Popup !</a>
Enfin, nous n’avons plus qu’à écrire nos méthodes JavaScript qui feront apparaître (et disparaître) notre popup :
function showPopup() {
// ici on insère dans notre page html notre div gris
$("#customPopup").before('<div id="grayBack"></div>');
// maintenant, on récupère la largeur et la hauteur de notre popup
var popupH = $("#customPopup").height();
var popupW = $("#customPopup").width();
// ensuite, on crée des marges négatives pour notre popup, chacune faisant
// la moitié de la largeur/hauteur du popup
$("#customPopup").css("margin-top", "-" + (popupH / 2 + 40) + "px");
$("#customPopup").css("margin-left", "-" + popupW / 2 + "px");
// enfin, on fait apparaître en 300 ms notre div gris de fond, et une fois
// son apparition terminée, on fait apparaître en fondu notre popup
$("#grayBack").css('opacity', 0).fadeTo(300, 0.5, function () { $("#customPopup").fadeIn(500); });
}
function hidePopup() {
// on fait disparaître le gris de fond rapidement
$("#grayBack").fadeOut('fast', function () { $(this).remove() });
// on fait disparaître le popup à la même vitesse
$("#customPopup").fadeOut('fast', function () { $(this).hide() });
}
Et voilà ! Votre popup est terminé et fonctionnel !
Voici les trois choses à noter :
- Les marges négatives pour l'affichage du popup au centre de l'écran (fonctionne sur la plupart des navigateurs !).
- L'utilisation du fadeTo et du fadeIn de jQuery pour faire apparaître le popup de façon un peu classe (toujours plus classe qu'un alert JavaScript non ?).
- Le z-index css qui permet de définir les priorités d'affichage des éléments de notre page (popup > fond gris > reste de la page).
Si vous avez des questions, n'hésitez pas !
Bonne journée et bon développement à tous !
image modifiée de Anton Fomkin, sous licence CC
Romaric Donfack, un consultant en développement .Net, a publié sur Developpez.com un tutoriel très intéressant.
Ce tutoriel présente WebMatrix, le nouvel environnement de développement léger et robuste de Microsoft. Cet outil permet de développer un site Web en ASP.Net ou PHP et de le déployer sur un IIS Express très facilement.
Un point intéressant est que l'intégration du code C# (ou VB, selon vos préférences) dans l'HTML se fait à l'aide du nouveau moteur Razor, sorti il y a peu. Ce moteur permet d'inclure du C# dans ses pages HTML (qui deviennent donc des pages CSHTML) très simplement.
Un exemple :
Un simple @ indique donc que le code qui suit est notre code C#. De plus, si on veut mettre plusieurs instructions C#, il suffit de mettre des accolades après l'@.
Microsoft offre donc un outil capable de rivaliser avec les solutions libres actuelles pour le développement Web dynamique simplifié (je pense surtout à WAMP par exemple pour le PHP).
Microsoft s'offre également le luxe de permettre à ses utilisateurs d'utiliser PHP pour leur développement Web.
WebMatrix fonctionne également très bien avec Visual Studio et SQL Server.
Pour plus d'informations, n'hésitez pas à aller lire le tutoriel à cette adresse.
image