javascript - remove - Cómo mostrar un mensaje emergente como en Stack Overflow

this jquery

Question

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.

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

Answer 1

Esto es lo que encontré al ver el origen de . 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 usan la longitud del mensaje para establecer el tiempo de espera de desvanecimiento. No me di cuenta de que todos los mensajes (que no se desvanecen) en realidad se desvanecen después de 30 segundos.

Answer 2

También checkout jQuery UI Dialog

Answer 3

Usar ModalPopup en el juego de herramientas de control AJAX es otra forma de obtener este efecto.

Answer 4

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

Answer 5

Yo uso jqModal , es fácil de usar y puedes lograr grandes efectos

Answer 6

EDIT : el siguiente código muestra cómo replicar las barras que se muestran en la parte superior de la pantalla cuando obtienes una nueva insignia, primero en llegar al sitio, etc. Para los diálogos de desplazamiento que obtienes cuando tratas de hacer comentarios demasiado rápido, vota para su propia pregunta, etc., revise esta pregunta donde le muestro cómo hacerlo o simplemente vaya directamente al example .

Así es como lo hace :

Este es el marcado, inicialmente oculto para que podamos fundirlo 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 voilá. Dependiendo de la configuración de su página, es posible que también desee editar el margen del cuerpo superior en la pantalla.

Aquí hay una demostración de esto en acción.