Result

jQuery

// 最初は隠しておく
$('.popup').hide();

// クリックイベント
$('.popup').click(function() {
    $(this).addClass('pin');
});

// ポップアップ後のホバー時の処理
$('.this').hover(function() {
    $('.popup').fadeIn(200);
}, function() {
    $('.popup:not(.pin)').fadeOut(200);
});

// ホバーでclass追加
$('.popup').hover(function() {
    $(this).addClass('click');
}, function() {
    $(this).removeClass('click');
});

$(document).mouseup(function() {
    $('.popup:not(.click)').removeClass('pin').fadeOut(200);
});

// 非表示にする
$('.submit').click(function() {
    $('.popup').fadeOut(200, function() {
        $('.trigger').fadeOut(200, function() {
            $('.this').remove();
            $('.success').fadeIn(200);
        });
    });
});

html

<p>
    テキストです。テキストです。テキストです。テキストです。テキストです。
</p>
<div class="success">
   サンキューメッセージ
</div>
<div>
    <div class="this">
        <span href="#" class="bt trigger">
            ボタン&hellip;
        </span>
        <div class="popup">
            <div>
ポップアップアイテム内の内容 
            </div>
        </div>
    </div>  
</div>
<p>
  テキストです。テキストです。テキストです。テキストです。テキストです。
</p>​

via

Seeking Code Feedback on Sticky Popup