Я нахожусь в любви с однокрасочными диалоговыми окнами "click-to-close" stackoverflow, которые приветствуют пользователя, когда они пытаются проголосовать и не вошли в систему или неправильно используют сайт. Любая идея, как и/или какая технология Джефф использовал для реализации этих аккуратных небольших устройств?
EDIT: я специально говорю о диалоговых окнах SQUARE, которые говорят "Нажмите, чтобы закрыть" на них. Я знаю, как реализовать прямоугольную полосу в верхней части экрана.
Хотя я был под впечатлением, они использовали jQuery UI Dialog для этого, я уже не слишком уверен. Однако, это не слишком сложно взломать это сами. Попробуйте этот код:
$('.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, которая действительно потрясающая и сделает это тривиальным для реализации.
Вы можете использовать библиотеку jQuery в сочетании с jQuery UI для создания диалоговых окон .