Sticky Popup

HTML

<link rel="stylesheet" href="http://dl.dropbox.com/u/90501/html/support/buttons.css">
<p>
    テキストです。テキストです。テキストです。テキストです。テキストです。
</p>

<div class="success">
    ありがとう！
</div>

<div>
    
    <div class="this">
        
        <span href="#" class="bt trigger">
            シェアする？&hellip;
        </span>
        
        <div class="popup">
            
            <div>
                
                <textarea name="" rows="5" cols="40"></textarea><br />
                <ul>
                    <li><input type="checkbox" name="shareSupport" value="Facebook" id="shareFacebook" />&nbsp;<label for="shareFacebook">Facebookでシェア</label></li>
                    <li><input type="checkbox" name="shareSupport" value="Twitter" id="shareTwitter" />&nbsp;<label for="shareTwitter">Twitterでシェア</label></li>
                </ul>
                <div class="buttonbar">
                    <a href="#" class="bt small twitter submit">シェア！</a>
                </div>
                <div class="neckBorder"></div>
                <div class="neck"></div>
                
            </div>
            
        </div>
        
    </div>
    
    <div class="clear"></div>
    
</div>

<p>
  テキストです。テキストです。テキストです。テキストです。テキストです。
</p>

CSS

body {
    background-color: #A9B4C1;
    color: #202326;
    margin: 2em 20%;
}


p {
    margin: 1em 0 0;
}

.clear {
    clear: both;
}

.this {
    margin: 1em 0 0;
    padding: 0;
    position: relative;
    float: left;
}

.trigger {
    width: 150px;
}

.popup {
    padding: 15px 0 0 0;
    position: absolute;
}

.popup > div {
    background-color: rgba(242,244,247,1.0);
    border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px;
    border: 2px solid rgba(000,000,000,0.85);
    box-shadow: 1px 1px 2px rgba(000,000,000,0.15); -moz-box-shadow: 1px 1px 2px rgba(000,000,000,0.15); -webkit-box-shadow: 1px 1px 2px rgba(000,000,000,0.15);
    padding: 20px;
    position: relative;
}

.popup textarea {
    width: 400px;
}

.popup ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.popup li {
    line-height: 16px;
    margin-top: 10px;
}

.popup .buttonbar {
    bottom: 20px;
    position: absolute;
    right: 20px;
}

.popup .neck,
.popup .neckBorder {
    border-style: solid;
    border-width: 10px;
    left: 10px;
    position: absolute;
    width: 0; height: 0;
}

.popup .neckBorder {
    border-color: transparent transparent rgba(000,000,000,0.85) transparent;
    top: -20px;
}

.popup .neck {
    border-color: transparent transparent rgba(242,244,247,1.0) transparent;
    top: -17px;
}

.success {
    background-color: rgba(000,000,000,0.10);
    border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px;
    color: #fff;
    display: none;
    line-height: 32px;
    margin-top: 1em;
    padding: 0 20px;
}

JavaScript

// ポップアップ後のホバー時の処理
$('.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);
        });
    });
});