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');
en par exemple
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>""