シンプルなモーダルダイアログを作ってみる

モーダルダイアログ

モーダルダイアログは、ダイアログボックスを閉じるまで他の操作をできなくするダイアログボックスのことです。モーダルダイアログを実現するために一般的な方法はjQuery UIのダイアログ用のモジュールを使用することです。jQuery UIのダイアログは普通のダイアログやモーダルダイアログの様々なパターンを簡単に導入することができます。テーマもそれなりに揃っていてデザイン的にもある程度満足できますし、カスタマイズも慣れれば簡単です。

jQuery UIは使用するモジュールを絞ってダウンロードしてもまだファイルサイズが大きいので(ダイアログモジュールだけをダウンロードしましたが、jQueryUI本体が圧縮して74kB、CSSもテーマ用のCSSも合わせると30kB越えました)、出来ることなら自作で済ませてロード時間の短縮を図りたいという思いがあり、今回はチャレンジしてみました。デザインの雰囲気は参考にしましたが、コード自体はjQuery UIのソースを参考にしたわけじゃなく、自分の想像だけでやってます。以下のリンクでデモを見れます。

デモページ

HTML

サンプルのダイアログ部分はこんな感じです。

どうにか見れる形になるように頑張ってたらこうなりました、という感じです。デザインのカスタマイズしやすさと、フォーム送信も使えるようにすることを目標にしています。モーダルじゃない普通のダイアログ(draggableやresizable)などを考慮するとこのHTMLだと厳しいかもしれません。

CSS

ダイアログをふわっと表示させたいので、もう何度目か分かりませんが「display: none;」と「opacity」の組合わせを使ってアニメーションさせます。「z-index」は他のどのコンテンツよりも大きくする必要があります。

モーダルの背景は以下のようにCSSを定義しています。

「position: fixed;」とすることで、ウィンドウの中の固定位置に表示させます。その固定位置は、top、left、right、bottomが全て0の位置です。これは上下左右中央に配置するという特殊な書き方です。本サンプルでは別のCSS定義を継承しているので書いていませんが、「margin:0」が必須です。そうしないと固定位置がmargin分ずれて変な隙間が生まれます。あと、このCSS定義にwidthとheightは指定しないでください、もしくは両方とも100%としてください。ウィンドウいっぱいに背景が広がりません。

次のポイントは、ダイアログボックスの位置です。これは以下のようにします。

この「position: relative;」の基準となる位置は、ウィンドウの左上です。ダイアログボックスを画面中央に出す場合は、ダイアログボックスの幅を定義して「margin-left: auto;」「margin-right: auto;」を定義します。難しいのは高さの位置です。

本サンプルでは「margin-top: 12%;」でだいたい中央にくるようにしていますが、ダイアログボックスのコンテンツの高さが大きかったり小さかったりする場合は、12%では中央には来ません。このあたりはコンテンツの高さに合わせてjQueryで変えるか、コンテンツの高さを固定にするなど適宜工夫する必要があります。

残りのCSSはダイアログボックスとコンテンツのデザインなので割愛します。

jQuery

jQueryのポイントは、モーダルダイアログを開く処理のsetTimeout関数です。ダイアログボックスを表示に切り替えてからふわっとダイアログを開くためにアニメーションさせようとすると、おそらく表示/非表示の切り替えが完全に終わっていないうちにaddClassでアニメーションしようとするため、アニメーションが始まらずにパッとダイアログボックスが表示されるだけになってしまいます。そこで、setTimeout関数でアニメーション開始のタイミングを遅らせています。

ふわっと閉じる処理では、その逆のことをしているだけです。ふわっと閉じるアニメーションが終わるまでsetTimeout関数で表示/非表示の切り替えタイミングを遅らせています。

draggableやresizableなどは課題ですね。

広告
  • LINEで送る