¿Cómo implementaría los diálogos flotantes de stackoverflow?

Question

Estoy en amor con cuadros de diálogo de "clic para cerrar" en 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?

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 el parte superior de la pantalla.

Answer 1

Aunque tenía la impresión de que usaron el cuadro de diálogo UI de jQuery para esto, ya no estoy tan 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 click here a verlo en acción.

Sin embargo, creo que todavía tendrá que ajustarlo un poco para darle las posiciones correctas dependiendo de la situación en la que lo está utilizando. 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 desea una implementación más robusta, debe verificar jQuery BeautyTips que es realmente impresionante y haría que esto sea trivial de implementar.

Answer 2

Puede usar la biblioteca jQuery junto con jQuery UI para crear dialogs.