Result
http://jsfiddle.net/kachibito/cU58G/11/embedded/result,js,css,html
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"> ボタン… </span> <div class="popup"> <div> ポップアップアイテム内の内容 </div> </div> </div> </div> <p> テキストです。テキストです。テキストです。テキストです。テキストです。 </p>