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
Oh mon Dieu ! Un article technique ! Je n'en avais pas écrit depuis presque un mois ! 
Lorsqu'on développe un site web qui contient des formulaires (peu importe la techno), on a parfois besoin d'un "sélecteur de date" pour aider l'utilisateur à renseigner une date dans un champ input. Seulement voilà, HTML, JavaScript, PHP, et ASP.Net n'offrent pas de sélecteur de date par défaut. 
Heureusement, jQuery en propose un plutôt simple à implémenter.
Pour cela, il vous faudra : une page web, vos bibliothèques jQuery, un peu de JavaScript, 2 oeufs, de la farine et c'est tout.
Vous devez, tout d'abord, renseigner les bibliothèques jQuery nécessaires (style et JavaScript) dans le header de votre page (ou dans le header de votre masterpage 
) :
<link href="Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
Ensuite, vous devez renseigner la bibliothèque qui vous permettra d'avoir votre sélecteur de date en français :
<script src="Scripts/jquery.ui.datepicker-fr.js" type="text/javascript"></script>
(Vous pouvez trouver le fichier jquery.ui.datepicker-fr.js ici.)
Enfin, vous n'avez plus qu'à ajouter dans votre page (de préférence dans le header, bien sûr ) ce morceau de JavaScript :
<script type="text/javascript">
$(function () {
$(".datefield").datepicker();
});
</script>
Grâce à ce morceau de code, tous les inputs de vos pages qui ont comme classe CSS "datefield" feront apparaître (au clic) un beau sélecteur de date, comme celui-ci :
J'espère que ça vous sera utile. Si vous avez besoin d'autres informations (dates pouvant être nulles, renseigner l'heure, ...), n'hésitez pas à lire cet article.
Bonne journée à tous !
source
image modifiée de Anton Fomkin, sous licence CC