【Css、JavaScript】モーダルウィンドウ作成|コピペ可能

  • このエントリーをはてなブックマークに追加

モーダルウィンドウとは、ウィンドウ内で表示された操作を完了するまで(またはキャンセルするまで)他の操作をさせないようにするウィンドウのことです。
モーダルウィンドウは、主にユーザーに重要な操作や確認を促したい時に利用されます。今回は、CssとjQueryでモーダルウィンドウを作成する方法をサンプルコードを提示しながら説明します。

  1. 下準備(Html)
  2. モーダルウィンドウが開いているデザイン作成(Css)
  3. モーダルウィンドウ開閉(jQuery)

 1. 下準備(Html)

モーダルウインドウのHtmlを作成していきます。モーダル表示中は他の操作をさせないようにするため、背景がスクロールされないようにレイヤーを重ねます。

●Html

tableに適用するCssは省略します。「modal」クラスをモーダルウィンドウのような見た目にするためのCssを作成します。

●Css

モーダルのようなデザインに変更することができました。

 2. モーダルウィンドウが開いているデザイン作成(Css)

モーダルウィンドウが開いている時は、他の操作をさせないようにするため、モーダルの背景にレイヤーを表示するようにします。また、モーダルは画面の左右中央で開くように調整します。

●Css

position:fixed


Box要素を指定した位置に固定することができます。絶対位置に配置されるのはposition: absoluteと同じですが、position:fixedと指定すると、スクロールしても位置が固定されたままとなります。
モーダルとレイヤーの位置を下記の図のように指定します。

Cssを適用すると、モーダルのようなレイアウトに変更することができます。

 3. モーダルウィンドウ開閉(jQuery)

削除ボタンがクリックされた時にモーダルを表示するようにします。そのため、画面読み込み直後はモーダルを非表示状態にしておきます。

●Css

削除ボタンクリックでモーダル表示、モーダル内のキャンセルボタン・×ボタンでモーダルを閉じるようにjQueryを利用してJavaScriptを作成します。

●JavaScript(jQuery)

ボタンクリックでdisplayプロパティを変更するようにしました。実際に作成したモーダルが以下のようになります。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*