Come mostrare un messaggio popup come in Stack Overflow

Question

Vorrei aggiungere un messaggio popup simile a quello visualizzato su Stack Overflow quando non sono connesso e cerco di utilizzare i pulsanti di votazione.

Qual è il metodo migliore per raggiungerlo? E 'finito usando una libreria jquery?

Answer 1

Io uso jqModal, facile da usare e si può ottenere alcuni grandi effetti

Answer 2

anche checkout jQuery UI Dialog

Answer 3

Utilizzando la ModalPopup nel toolkit di controllo AJAX è un altro modo è possibile ottenere questo effetto.

Answer 4

MODIFICA: Il codice seguente mostra come replicare le barre che vengono visualizzate nella parte superiore dello schermo quando si riceve un nuovo badge, prima si accede al sito, ecc. Per le finestre di dialogo che si aprono quando si prova per commentare troppo velocemente, vota per la tua domanda, ecc, controlla this question dove mostro come farlo o vai direttamente allo example.

---

Ecco come StackOverflow fa:

Questo è il markup, inizialmente nascosto in modo che possiamo svanire in:

<div id='message' style="display: none;"> 
    <span>Hey, This is my Message.</span> 
    <a href="#" class="close-notify">X</a> 
</div> 

Qui sono gli stili applicati:

#message { 
    font-family:Arial,Helvetica,sans-serif; 
    position:fixed; 
    top:0px; 
    left:0px; 
    width:100%; 
    z-index:105; 
    text-align:center; 
    font-weight:bold; 
    font-size:100%; 
    color:white; 
    padding:10px 0px 10px 0px; 
    background-color:#8E1609; 
} 

#message span { 
    text-align: center; 
    width: 95%; 
    float:left; 
} 

.close-notify { 
    white-space: nowrap; 
    float:right; 
    margin-right:10px; 
    color:#fff; 
    text-decoration:none; 
    border:2px #fff solid; 
    padding-left:3px; 
    padding-right:3px 
} 

.close-notify a { 
    color: #fff; 
} 

E questo è javascript (usando jQuery):

$(document).ready(function() { 
    $("#message").fadeIn("slow"); 
    $("#message a.close-notify").click(function() { 
     $("#message").fadeOut("slow"); 
     return false; 
    }); 
}); 

E voilà. A seconda della configurazione della pagina, potresti anche voler modificare la parte superiore del margine del corpo sul display.

Here is a demo of it in action.

Answer 5

Ecco cosa ho trovato di visualizzare la fonte StackOverflow. Si spera che voglia un po 'di tempo per qualcuno. La funzione showNotification viene utilizzata per tutti quei messaggi popup.

var showNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg)}; 
var showFadingNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg,true)}; 

//master... 
showErrorPopup: function (e, h, f) { 
    var g = $('<div class="error-notification supernovabg"><h2>' + h + "</h2>" + (f ? "" : "(click on this box to dismiss)") + "</div>"); 
    var i = function() { 
     g.fadeOutAndRemove() 
    }; 
    $(e).append(g); 
    g.click(i).fadeIn("fast"); 
    setTimeout(i, (f ? Math.max(2500, h.length * 40) : 1000 * 30)) 
} 

css

.error-notification{z-index:1;cursor:pointer;display:none;position:absolute;padding:15px;-moz-box-shadow:2px 2px 5px #000;-webkit-box-shadow:2px 2px 5px #000;box-shadow:2px 2px 5px #000;} 
.error-notification a{color:inherit;text-decoration:underline;} 
.error-notification li{font-size:110%;padding-top:3px;} 
.supernovabg{color:#fff !important;background-color:#fe7a15 !important;} 

E 'fresco come usano la lunghezza del messaggio per impostare il timeout dissolvenza. Non mi ero reso conto che tutti i messaggi (senza sbiadire) in effetti si dissolvono dopo 30 secondi.

Answer 6

Controllare bootstrap. Ci sono alcuni effetti pop-up, modali, transizioni, avvisi, tutto basato su javascript e css.