Stack Overflowのようなポップアップメッセージを表示する方法

Question

ログインしていないときにStack Overflowに表示されるポップアップメッセージを追加したいと思います。投票ボタンを使用しようとしています。

これを達成するための最良の方法は何ですか？ これはjqueryライブラリを使用して行われますか？

Answer 1

私が使いやすい、jqModalを使用して、

Answer 2

またAJAXコントロールツールキットでModalPopupを使用してjQuery UI Dialog

Answer 3

をチェックアウトいくつかの素晴らしい効果を得ることができますが、あなたがこの効果を得ることができる別の方法です。

Answer 4

EDIT：以下のコードは、最初にあなたがしようとすると、あなたが得るホバリングダイアログについてなど、サイトに来る、あなたは新しいバッジを取得するときに、画面の上部に表示さバーを複製する方法を示していますあまりにも早くコメントしたり、あなた自身の質問などに投票したりするには、this questionをチェックしてください。ここで私はこれを行う方法を示すか、ただちにexampleに行きます。スタイルが適用されている。ここ

<div id='message' style="display: none;"> 
    <span>Hey, This is my Message.</span> 
    <a href="#" class="close-notify">X</a> 
</div> 

：

これは、最初はそう隠されたマークアップ、我々はそれをフェードすることができます：

---

はここにStackOverflowはそれをしない方法です

#message { 
    font-family:Arial,Helvetica,sans-serif; 
    position:fixed; 
    top:0px; 
    left:0px; 
    width:100%; 
    z-index:105; 
    text-align:center; 
    font-weight:bold; 
    font-size:100%; 
    color:white; 
    padding:10px 0px 10px 0px; 
    background-color:#8E1609; 
} 

#message span { 
    text-align: center; 
    width: 95%; 
    float:left; 
} 

.close-notify { 
    white-space: nowrap; 
    float:right; 
    margin-right:10px; 
    color:#fff; 
    text-decoration:none; 
    border:2px #fff solid; 
    padding-left:3px; 
    padding-right:3px 
} 

.close-notify a { 
    color: #fff; 
} 

これはjavascriptです（jQueryを使用しています）：

$(document).ready(function() { 
    $("#message").fadeIn("slow"); 
    $("#message a.close-notify").click(function() { 
     $("#message").fadeOut("slow"); 
     return false; 
    }); 
}); 

そしてvoila。あなたのページの設定に応じて、ディスプレイ上のボディマージンを編集することもできます。

Here is a demo of it in action.

Answer 5

は、ここで私はStackOverflowのソースを見てから見つけたものです。うまくいけば誰かのために時間を節約します。 showNotification関数は、これらのポップアップメッセージすべてに使用されます。

var showNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg)}; 
var showFadingNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg,true)}; 

//master... 
showErrorPopup: function (e, h, f) { 
    var g = $('<div class="error-notification supernovabg"><h2>' + h + "</h2>" + (f ? "" : "(click on this box to dismiss)") + "</div>"); 
    var i = function() { 
     g.fadeOutAndRemove() 
    }; 
    $(e).append(g); 
    g.click(i).fadeIn("fast"); 
    setTimeout(i, (f ? Math.max(2500, h.length * 40) : 1000 * 30)) 
} 

CSS

.error-notification{z-index:1;cursor:pointer;display:none;position:absolute;padding:15px;-moz-box-shadow:2px 2px 5px #000;-webkit-box-shadow:2px 2px 5px #000;box-shadow:2px 2px 5px #000;} 
.error-notification a{color:inherit;text-decoration:underline;} 
.error-notification li{font-size:110%;padding-top:3px;} 
.supernovabg{color:#fff !important;background-color:#fe7a15 !important;} 

それは彼らがフェージングタイムアウトを設定するために、メッセージの長さを使用してどのようにクールです。私はすべての（非フェーディングスタイルの）メッセージが実際に30秒後に消えていくことを認識しませんでした。

Answer 6

チェックbootstrap。いくつかのポップアップエフェクト、モーダル、トランジション、アラート、javascriptとcssに基づくものがあります。