freefuntimes今回はjQueryを用いて、ページ内に複数設置できるモーダル(ポップアップ)ウィンドウをを実装してみる。利用しやすいように、今回はモーダル(ポップアップ)ウィンドウが1つの場合でも、2つ以上の場合でも使えるよう対応している。モーダル(ポップアップ)ウィンドウの中身が、多くなった場合でもスクロールして中身を確認できるように対応している。その他、ポップアップの切り替わりは、ボタンを押すとふわっと現れ、モーダル(ポップアップ)ウィンドウ以外の部分や×ボタンを押すとふわっと閉じる仕様になっている。下記の記事では、JavaScriptのみで対応しているものがあるので参考にしてみてほしい。参考記事はこちらデモは下記を参考にしてほしい。demoそれでは解説に入っていく。src="style.js"></script></body></html>htmlの記述は冒頭で紹介した参考記事と同様なので、解説は割愛する。}}cssの記述については、jQuery側でfadeInとfadeOutを使うため、下記のjs_modalWrapというクラスに対して、displayをnoneと設定している。100%;}この他にも、冒頭で紹介した記事では、keyframesを設定していたが、こちらは不要になるので削除している。ページの最初のボタンをクリックすると、一番目data-modal-btnのmodal01が取得できる2で取得したdataをIDで取得することについて、letでmodalの変数を定義この指定によって、「data-modal-btnのmodal01」と「もともとhtmlに記述されているid→modal01」が結びつけられるようになる。モーダル(ポップアップ)の内容についているid(modal01〜03)に対して、fadeInが実行され、ふわっとモーダル(ポップアップ)が表示される例えばページの最初のボタンをクリックすると、一番目data-modal-btnのmodal01が取得できるモーダル(ポップアップ)の非表示あとはどこをクリックしたときに、モーダル(ポップアップ)を非表示にしたいかを考えていけばよい。今回は、下記の場合に対応している。(2)人気ブログランキングこのサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。