// 最初は隠しておく $('.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); }); }); });
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; }
<p> テキストです。テキストです。テキストです。テキストです。テキストです。 </p> <div class="success"> ありがとう! </div> <div> <div class="this"> <span href="#" class="bt trigger"> シェアする?… </span> <div class="popup"> <div> <textarea name="" rows="5" cols="40"></textarea><br /> <ul> <li><input type="checkbox" name="shareSupport" value="Facebook" id="shareFacebook" /> <label for="shareFacebook">Facebookでシェア</label></li> <li><input type="checkbox" name="shareSupport" value="Twitter" id="shareTwitter" /> <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>