Message d'en-tête juste comme à Stack Overflow

Question

C'est la première fois que je visite stack overflow et j'ai vu un beau message d'en-tête qui affiche un texte et un bouton de fermeture.

La barre d'en-tête est fixe et est très efficace pour attirer l'attention du visiteur. Je me demandais si l'un d'entre vous connaissait le code pour obtenir le même type de barre d'en-tête.

Answer 1

Implémentation rapide en JavaScript pur :

function MessageBar() {
    // Style CSS :
    var css = function(el,s) {
        for (var i in s) {
            el.style[i] = s[i];
        }
        return el;
    },
    // Créer l'élément :
    bar = css(document.createElement('div'), {
        top: 0,
        left: 0,
        position: 'fixed',
        background: 'orange',
        width: '100%',
        padding: '10px',
        textAlign: 'center'
    });
    // Injecter l'élément :
    document.body.appendChild(bar);
    // Fournir une méthode pour définir le message :
    this.setMessage = function(message) {
        // Vider le contenu :
        while(bar.firstChild) {
            bar.removeChild(bar.firstChild);
        }
        // Ajouter le nouveau message :
        bar.appendChild(document.createTextNode(message));
    };
    // Fournir une méthode pour basculer la visibilité :
    this.toggleVisibility = function() {
        bar.style.display = bar.style.display === 'none' ? 'block' : 'none';
    };
}

Comment l'utiliser :

var myMessageBar = new MessageBar();
myMessageBar.setMessage('bonjour');
// Il est simple de basculer la visibilité :
myMessageBar.toggleVisibility();

Answer 2

Mise à jour:

---

Découvrez la DÉMO

Code Utilisé:

$(function(){
  $('#smsg_link').click(function(){
  showMessage('#9BED87', 'black', 'Ceci est un message de succès d'exemple');
  return false;
});

$('#imsg_link').click(function(){
  showMessage('#FFE16B', 'black', 'Ceci est un message d'info d'exemple');
  return false;
});

$('#emsg_link').click(function(){
  showMessage('#ED869B', 'black', 'Ceci est un message d'erreur d'exemple');
  return false;
});
});

/*
showMessage function par Sarfraz:
-------------------------
Affiche un message fantaisiste en haut de la fenêtre

params:
  - bgcolor:     La couleur d'arrière-plan de la boîte de message
  - color:     La couleur du texte de la boîte de message
  - msg:       Le texte du message
*/
var interval = null;

function showMessage(bgcolor, color, msg)
{
    $('#smsg').remove();
    clearInterval(interval);

    if (!$('#smsg').is(':visible'))
    {
        if (!$('#smsg').length)
        {
            $(''+msg+'').appendTo($('body')).css({
                position:'fixed',
                top:0,
                left:0,
                width:'98%',
                height:'30px',
                lineHeight:'30px',
                background:bgcolor,
                color:color,
                zIndex:1000,
                padding:'10px',
                fontWeight:'bold',
                fontSize:'18px',
                textAlign:'center',
                opacity:0.8,
                margin:'auto',
                display:'none'
            }).slideDown('show');

            interval = setTimeout(function(){
                $('#smsg').animate({'width':'hide'}, function(){
                    $('#smsg').remove();
                });
            }, 3000);
        }
    }
}

---

Si vous souhaitez créer le vôtre, consultez la fonction slideToggle de jQuery.

Answer 3

Le CSS pertinent inclurait :

position: fixed;
top: 0;
width: 100%;

Plus d'informations sur position:fixed :

Un élément avec position: fixed est positionné aux coordonnées spécifiées par rapport à la fenêtre du navigateur. La position de l'élément est spécifiée avec les propriétés "left", "top", "right", et "bottom". L'élément reste à cette position indépendamment du défilement. Fonctionne dans IE7 (mode strict)

Si le support d'IE6 est important pour vous, vous voudrez peut-être rechercher des solutions de contournement.

Answer 4

Voici une méthode alternative utilisant jQuery qui fera également glisser vers le haut/vers le bas lors de l'affichage/masquage.

Ajoutez le code HTML suivant juste après la balise de votre page :

    Mon message           
    fermer

Ajoutez ce CSS à votre feuille de style

#msgBox {
    padding:10px; 
    background-color:Orange; 
    text-align:center; 
    display:none; 
    font:bold 1.4em Verdana;
}
#msgCloseButton{
    float:right;    
}

Et finalement voici le javascript pour configurer le bouton de fermeture et les fonctions pour afficher et masquer la barre de message :

/* Document Ready */
$(function () {
    SetupNotifications();
});

SetupNotifications = function () {
    //configurer le bouton de fermeture dans msgBox
    $("#msgCloseButton").click(function (e) {
        e.preventDefault();
        CloseMsg();
    });
}

DisplayMsg = function (sMsg) {
    //définir le texte du message
    $("#msgText").text(sMsg);
    //afficher le message
    $('#msgBox').slideDown();
}

CloseMsg = function () {
    //masquer le message
    $('#msgBox').slideUp();
    //effacer le texte du message
    $("#msgtText").val("");
}

Pour effectuer un test simple, vous pourriez essayer ceci :

Afficher le message !

Answer 5

Quelque chose comme ça ?

$("#bar").slideUp();

Cependant, ici je pense qu'ils font d'abord disparaître la barre puis remontent le conteneur principal, donc ça ressemblerait à cela :

$("#bar").fadeOut(function(){
    $("#container").animate({"top":"0px"});
});