Как бы реализовать диалоговые окна наложения папок stackoverflow?

Question

Я нахожусь в с однокрасочными диалоговыми окнами stackoverflow от «click-to-close», которые приветствуют пользователя, когда они пытаются проголосовать и не вошли в систему или неправильно используют сайт./или какая технология Джефф использовал для реализации этих аккуратных небольших устройств?

EDIT: Я специально говорю о диалоговых окнах SQUARE, которые говорят «нажмите, чтобы закрыть». Я знаю, как реализовать прямоугольную полосу на Верхняя часть экрана

Answer 1

Хотя я был под впечатлением, они использовали диалог интерфейса jQuery для этого, я уже не уверен. Однако, это не слишком сложно взломать это сами. Попробуйте этот код:

$('.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(); }); 
}); 

С помощью этих стилей:

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

И click here, чтобы увидеть его в действии.

Однако, я думаю, вам все равно нужно немного подстроить его, чтобы придать ему правильные позиции в зависимости от ситуации, в которой вы его используете. Я позаботился об этом для левой позиции, потому что он работает на вершине, но я думаю, что могут быть ситуации, в которых это не будет. Все, что считается, это должно заставить вас начать. Если вы хотите более надежную реализацию, вы должны проверить jQuery BeautyTips, который является действительно удивительным и сделает это тривиально для реализации.

Answer 2

Вы можете использовать библиотеку jQuery совместно с jQuery UI для создания dialogs.