34

私は、ユーザーが投票しようとしてログインしていない、またはサイトを正しく使用していないときに、スタックオーバーフローの単色の「クリックして閉じる」ホバリングダイアログボックスに恋をしています。ジェフがどのように、および/またはどのテクノロジーを使用したかについてのアイデアこれらのきちんとした小さなデバイスを実装するには?

編集：私は具体的には、「クリックして閉じる」と表示されているSQUAREダイアログボックスについて話している。画面上部に長方形のストリップを実装する方法を知っています。

4

2 に答える 2

51

これには 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を確認してください。これは本当に素晴らしく、実装が簡単になります。

于 2009-04-17T04:46:19.057 に答える
2

jQueryライブラリをjQuery UIと組み合わせて使用​​して、ダイアログを作成できます。

于 2009-04-17T03:39:02.383 に答える