Tôi sẽ triển khai hộp thoại lơ lửng của stackoverflow như thế nào?

Question

Tôi đang ở yêu thích với hộp thoại di chuột "nhấp để đóng" của stackoverflow, chào hỏi người dùng khi họ bỏ phiếu và không đăng nhập hoặc sử dụng trang web không chính xác./hoặc công nghệ mà Jeff sử dụng để thực hiện những thiết bị nhỏ gọn này?

EDIT: Tôi đang nói cụ thể về các hộp thoại SQUARE có nội dung "Click to Close" trên chúng. trên cùng của màn hình

Answer 1

Mặc dù tôi đã có ấn tượng rằng họ đã sử dụng Hộp thoại giao diện người dùng của jQuery cho điều này, tôi không còn chắc chắn nữa. Tuy nhiên, nó không quá khó khăn để đánh lừa này lên chính mình. Hãy thử mã này:

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

Với những phong cách:

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

Và click here để xem nó trong hành động.

Tuy nhiên, tôi nghĩ bạn vẫn cần phải tinh chỉnh nó một chút để cung cấp cho vị trí phù hợp tùy thuộc vào tình huống bạn đang sử dụng. Tôi đã chăm sóc này cho vị trí bên trái bởi vì nó đang làm việc cho đầu, nhưng tôi nghĩ rằng có thể có một số tình huống trong đó nó sẽ không. Tất cả những điều được xem xét, điều này sẽ giúp bạn bắt đầu. Nếu bạn muốn triển khai mạnh mẽ hơn, bạn nên xem jQuery BeautyTips là thực sự là tuyệt vời và sẽ làm cho việc triển khai này trở nên tầm thường.

Answer 2

Bạn có thể sử dụng thư viện jQuery kết hợp với jQuery UI để tạo dialogs.