Как бы я реализовал парящие диалоговые окна stackoverflow? - PullRequest
Новая
       30

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

34 голосов
/ 17 апреля 2009

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

РЕДАКТИРОВАТЬ: я специально говорю о диалоговых окнах КВАДРАТ, которые говорят "Нажмите, чтобы закрыть" на них. Я знаю, как реализовать прямоугольную полосу в верхней части экрана.

Ответы [ 2 ]

51 голосов
/ 17 апреля 2009

Хотя у меня сложилось впечатление, что для этого они использовали UI Dialog от 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;
}

И нажмите здесь , чтобы увидеть его в действии.

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

2 голосов
/ 17 апреля 2009

Вы можете использовать библиотеку jQuery в сочетании с пользовательским интерфейсом jQuery для создания диалогов .

...