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"> ボタン… </span> <div class="popup"> <div>ポップアップアイテム内の内容 </div> </div> </div> </div><p> テキストです。テキストです。テキストです。テキストです。テキストです。</p> |
