• ブログ
    5分でブログサイト完成!ワードプレスで簡単ブログサイト作成術
    2019年03月28日
  • seo対策リンク SEO対策
    SEO対策で重要な被リンク元の調べ方 | 初心者向けのSEO対策ノウハウ
    2019年05月16日
  • 被リンクの量と質 SEO対策
    SEO対策で重要な被リンク元の数と質 | 初心者向けSEO対策ノウハウ
    2019年05月16日
  • ユーザー属性 SEO対策
    SEOでアクセス数アップを目指すには、10のユーザー種別の理解がポイント
    2019年05月16日
  • 被リンク対策 SEO対策
    SEO対策で重要な被リンク元の増やし方 | 初心者向けSEO対策ノウハウ
    2019年05月16日
  • SEO対策 SEO対策
    SEO初心者向けのSEO実践ノウハウ!7個のポイントをご紹介
    2019年05月16日
  • ローカル検索 SEO対策
    ローカルSEOの内部対策!商圏エリアで検索上位を獲得する方法
    2019年05月16日
  • Webデザイン ホームページ制作
    ホームページ制作はスマホファーストの時代!デバイスの多様化に対応
    2019年02月26日
  • 歯医者さんのブログ記事 ブログ集客
    見ているだけ参考になる歯科のブログ3選!歯科のホームページ制作
    2019年03月12日
  • 採用サイト ホームページ制作
    奈良の求人サイト制作会社が教えるIndeed活用ノウハウ!ダイレクト・リクルーティング
    2019年03月14日
jQueryでモーダルウィンドウを自作!コピペで使えるコード付き

こんにちは。
JOYCONNECTのデザイン担当、デザインマスターです。

今回はjQueryでモーダルウィンドウを自作したいと思います。

コピペで使えるコード付きなので、
jQuery初心者の方でも安心して読み進めていただける内容です。

モーダルウィンドウを実装

モーダルウィンドウ
複数のサムネイル画像を並べておき、
画像をクリックするとモーダルウィンドウで拡大画像を表示するWEBページを作成します。

HTMLには、ul/li要素で並べたサムネイル画像の後に、
「glayLayer」と「overLayer」というidをつけたdiv要素を用意します。

glayLayerはページ全体に重ねる半透明のレイヤーを表示するための要素で、
overLayerは子ウィンドウを表示するための要素です。

子ウィンドウに表示したい要素はoverLayer内に配置します。

CSSでは半透明レイヤー(glayLayer)をブラウザーいっぱいに表示するため、
glayLayerの親要素のbody要素、およびbody要素の親要素のhtml要素をheight:100%にします。

またopacityに対応していないIE9未満向けには独自のfilterプロパティ(filter:alpha(opacity=透明度))を設定します。

子ウィンドウ(overLayer)もposition:fixedで配置し、
topとleftに50%を設定し、margin-topに拡大画像の高さの半分のネガティブマージンを、
margin-leftに拡大画像の横幅の半分のネガティブマージンを設定すると画面中央に配置できます。

>>デモをチェックする

jQueryでモーダルウィンドウを作成する

次にjQueryを使ってサムネイル画像がクリックされたらモーダルウィンドウウィを生成し、
拡大画像を表示するスクリプトを作ります。

スクリプトですが、append()を使って、
body要素の一番後ろに<div id='glayLayer'></div>と<div id='overLayer'></div>を追加します。

そして#glayLayerにclickイベントを設定し、
モーダルウィンドウが開いている時にウィンドウを閉じて元の状態に戻す処理を記述しています。
半透明レイヤーがクリックされると、
半透明レイヤー(glayLayer)と子ウィンドウ(overLayer)をhide()で非表示にします。

次にclass属性がmodalのa要素に対してclickイベントを設定し、
a要素がクリックされるとglayLayerとoverLayerをshow()で表示状態に変更し、
html()を使ってoverLayerにimg要素を挿入します。

画像ではなくテキストをモーダルウィンドウに表示する

モーダルウィンドウ
先ほどは画像を表示しましたが、
画像の代わりにテキストを表示させることも可能です。

CSSは子ウィンドウ(overLayer)に対してwidthを指定していること、
margin-topとmargin-leftは設定していないことがポイントです。

といのも、大きさが一定の画像とは異なり、
テキストの場合は内容によってウィンドウのサイズが変わるためです。

そこでウィンドウを中央に表示するためのmargin-topとmargin-leftの値はjQueryで要素のサイズを取得し、調整します。

初期表示状態を作るため、hide()でdd要素を非表示に変更します。

overLayerには、クリックされたdt要素の次に出現するdd要素を隣接セレクターを使って取得し、html()を追加します。

また子ウィンドウを中央に表示するためのmargin-topとmargin-leftのネガティブマージンもclickイベントの中で設定します。

ネガティブマージンの値は、
HTMLを含んだoverLayerのwidth、heightをwidth()とheight()を使って取得し、
その半分の値を設定します。

最後に閉じるボタンをつければより使いやすいモーダルウィンドウが完成します。

>>デモをチェックする

関連キーワード
  • jQuery
    jQueryを使ってCSSのスタイルを変更(アニメーション)!jQueryの基礎 -初級編-
  • バリデーション
    バリデーション付き問い合わせフォーム!jQuery初心者向け サンプルコード付き
  • フローティングウィンドウ
    フローティングウィンドウを実装!jQuery初心者向け サンプルコード付き
  • モーダルウィンドウ
    jQueryでモーダルウィンドウを自作!コピペで使えるコード付き
  • ドロップダウンメニュー
    多階層ドロップダウンメニュー(グローバルメニュー)を自作!サンプルコード付き
  • 正規表現
    文字列の置換に便利な正規表現 - JavaScript
ホームページ制作・WEBコンサルティングのご相談は無料

JOYCONNCTでは、社内の人材不足やノウハウ不足により、
WEB集客に関するお悩みを抱えられている中小企業様のサポートをしております。

TEL: 0742-55-4737/営業時間: 9:00〜18:00(平日)

この記事が気に入ったら
フォローしよう

最新情報をお届けします

おすすめの記事