un popup informatif à l'ouverture de la page
En plaçant ce code dans la page concernée, vous pouvez faire apparaître des popup informatifs à certains endroits de la page lors de son chargement.
Il est possible de modifier le contenu de
createNoty('Hi! This is my message', 'info');
createNoty('""je suis passé en mode wiki avec du coup [[DocumentatioN ses fonctionnalités]]""', 'info');
"" <!-- on cree une div qui va contenir les alertes (notifications) --> <div id="noty-holder"></div> <script> // fonction pour creer les notifs function createNoty(message, type) { var html = '<div class="alert alert-' + type + ' alert-dismissable page-alert">'; html += '<button type="button" class="close"><span aria-hidden="true">É</span><span class="sr-only">Close</span></button>'; html += message; html += '</div>'; $(html).hide().prependTo('#noty-holder').slideDown(); }; // fonction pour attendre que jquery soit chargé pour lancer les notifs function jloaded() { if (window.jQuery) { // c'est ici qu'on indique les message a afficher et le type de notif createNoty('Hi! This is my message', 'info'); createNoty('message success', 'success'); createNoty('message warning', 'warning'); createNoty('message danger', 'danger'); createNoty('message info', 'info'); // fin creation des notifs // animation de la fermeture des notifs $('.page-alert .close').click(function(e) { e.preventDefault(); $(this).closest('.page-alert').slideUp(); }); } else { setTimeout(function() { jloaded() }, 50); } } jloaded() </script> <!-- style css pour positionner les notifs (en haut a droite ici), et limiter la taille (300px ici) --> <style> #noty-holder{ width: 300px; top: 10px; right: 10px; font-weight: bold; z-index: 1031; /* Max Z-Index in Fixed Nav Menu is 1030*/ text-align: center; position: fixed; } </style>""