2009-03-18 53 views
103

Me gustaría agregar un mensaje emergente como el que aparece en Stack Overflow cuando no estoy conectado y trato de usar los botones de votación.Cómo mostrar un mensaje emergente como en Stack Overflow

¿Cuál es el mejor método para lograr eso? ¿Se hace usando una biblioteca jquery?

+16

Ver la fuente! –

+8

lo hice, y parecía referirse a question.min.js No pude encontrar ese complemento, así que hice la pregunta – Puneet

+0

Dojo tiene una barra de actualización que hace esto: http://trac.dojotoolkit.org/browser/branches /1.6/dojox/widget/UpgradeBar.js http://trac.dojotoolkit.org/browser/branches/1.6/dojox/widget/UpgradeBar – mwilcox

Respuesta

4

utilizo jqModal, fácil de usar y se puede conseguir algunos grandes efectos

4

Utilizando el ModalPopup en el kit de herramientas de control de AJAX es otra manera de conseguir este efecto.

+1

por favor comente el downvote, usando una ventana emergente modal es perfectamente válido para lo que hizo la pregunta original. – patjbs

153

EDIT: El siguiente código muestra cómo replicar las barras que se muestran en la parte superior de la pantalla cuando obtiene una nueva insignia, primero ingresa al sitio, etc. Para los cuadros de diálogo que aparece cuando intenta para comentar demasiado rápido, votar por su propia pregunta, etc., consulte this question donde le muestro cómo hacerlo o simplemente vaya directamente al example.


Así es como Stackoverflow lo hace:

Este es el marcado, inicialmente oculta para que podamos desaparecer en:

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

Aquí están los estilos aplicados:

#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; 
} 

Y esto es javascript (usando jQuery):

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

Y listo. Dependiendo de la configuración de su página, es posible que también desee editar el margen del cuerpo superior en la pantalla.

Here is a demo of it in action.

+3

Releyendo la pregunta No creo que esto sea lo que el Op quería. Creo que está buscando las cajas que aparecen como avisos en el sitio cerca de lo que sea que hagas. Supongo que dejaré esto de todos modos. –

+0

Paolo, ¡Gracias por dejar esto! Creo que esto puede funcionar bastante mejor de lo que estaba usando para esta acción. – Jayrox

+3

Si bien no es la respuesta, igualmente útil: P – rball

3

Esto es lo que encontré de visualización de la fuente StackOverflow. Esperemos que ahorre algo de tiempo para alguien. La función showNotification se usa para todos esos mensajes emergentes.

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;} 

Es genial cómo utilizan la longitud del mensaje para establecer el tiempo de espera de la decoloración. No me di cuenta de que todos los mensajes (que no se desvanecen) en realidad se desvanecen después de 30 segundos.

0

Verificar bootstrap. Hay algunos efectos emergentes, modales, transiciones, alertas, todo basado en javascript y css.

Cuestiones relacionadas