javascript - form - jquery modal show
¿Cómo implementaría los diálogos flotantes de stackoverflow? (2)
Me encantan los cuadros de diálogo de "clic para cerrar" de un solo color de stackoverflow que saludan a un usuario cuando intentan votar y no están conectados o utilizan el sitio incorrectamente. Cualquier idea de cómo y / o qué tecnología utilizó Jeff para implementar estos pequeños dispositivos aseados?
EDITAR: estoy hablando específicamente de los cuadros de diálogo CUADRADOS que dicen "Haga clic para cerrar" en ellos. Sé cómo implementar la tira rectangular en la parte superior de la pantalla.
Aunque tenía la impresión de que usaron el cuadro de diálogo UI de jQuery para esto, ya no estoy muy seguro. Sin embargo, no es demasiado difícil batir esto usted mismo. Prueba este código:
$(''.showme'').click(function() {
$(''.error-notification'').remove();
var $err = $(''<div>'').addClass(''error-notification'')
.html(''<h2>Paolo is awesome</h2>(click on this box to close)'')
.css(''left'', $(this).position().left);
$(this).after($err);
$err.fadeIn(''fast'');
});
$(''.error-notification'').live(''click'', function() {
$(this).fadeOut(''fast'', function() { $(this).remove(); });
});
Con estos estilos:
.error-notification {
background-color:#AE0000;
color:white;
cursor:pointer;
display: none;
padding:15px;
padding-top: 0;
position:absolute;
z-index:1;
font-size: 100%;
}
.error-notification h2 {
font-family:Trebuchet MS,Helvetica,sans-serif;
font-size:140%;
font-weight:bold;
margin-bottom:7px;
}
Y haga clic aquí para verlo en acción.
Sin embargo, creo que todavía necesitarías ajustarlo un poco para darle las posiciones correctas dependiendo de la situación en la que lo estés usando. Me ocupé de esto para la posición de la izquierda porque está trabajando para la parte superior, pero creo que puede haber algunas situaciones en las que no. Considerando todo, esto debería comenzar. Si quieres una implementación más robusta, deberías consultar jQuery BeautyTips, que es realmente increíble y sería trivial implementarlo.