ミギムキ

[jQuery] 画面下からサッと出てくる通知用ポップアップを設置したい

やりたいこと

サンプルコード

html

<button>ボタン</button> <p class="popup">ボタンが押されました</p>
スポンサー広告

CSS

.popup { position: fixed; bottom: 0px; left: 0px; right: 0px; transform: translateY(100%); padding: 1em; margin: 0px; background-color: #3388dd; color: #fff; text-align: center; opacity: 0; transition: 0.5s; } .popup.js_active { transform: translateY(0%); opacity: 1; }

jQuery

jQuery(function($) { $('button').click(function() { $('.popup').addClass('js_active'); setTimeout(function() { $('.popup').removeClass('js_active'); }, 3000); }); $('.popup').hover(function() { $(this).removeClass('js_active'); }); });
スポンサー広告

仕組み、解説、補足など