プログラミングの世界

jQuery モーダルウィンドウを作って表示してみよう

モーダルウィンドウとは、操作が完了するまで親ウィンドウへの操作を受け付けなくさせるタイプのウィンドウのことで clickイベントなどに基づいて、表示/非表示が行われる要素のことです 新規会員登録やログインページなどでよく利用されている機能です

モーダルウィンドウをつくろう

ステップ1
モーダルをCSSで非表示にする 「.○○-modal-wrapper {
 display: none;
}」
ステップ2
clickイベントを設定 「$(‘セレクタ’).click(function() { });」
ステップ3
clickイベントでモーダルを非表示 「$(‘セレクタ’).click(function() {
$(‘○○-modal’).fadeIn();
});」

モーダルウィンドウを隠そう

ステップ1
閉じるボタンにclickイベントを設定 「$(‘.close-modal’).click(function() {});」
ステップ2
fadeOutメソッドでモーダルを隠す 「$(‘セレクタ’).click(function() {
$(‘セレクタ’).fadeOut();
});」
ABOUT ME
あんず
大阪在住のあんずです 二十代で全身性エリテマトーデス(SLE)と診断され紫外線を避け夜行性に その頃自宅で出来るアフェリエイトを独学し生活費を賄っていましたが 人との繋がりが恋しくなり 夜外勤するようになりました 最近になりまたこの世界に戻って来ましたが SEO等全てが新しくなっていて浦島太郎状態でしたが 1から勉強し直しまた収益化できるように そのノウハウを無料公開していきます 【スキル】 アフェリエイト/ブログ運営/プロミラミング