[HTML & CSS General] HTML5 Custom Data Attributes と jQuery を利用した Modal

memo.

lightbox 風のシンプルなモーダルを作るための手順を調べていたら、HTML5 の Custom Data Attributes を使う方法があったので勉強させて頂きました。

• jQuery 簡単にモーダルウィンドウを実装する方法 (プラグイン不要) | Stronghold
• 初心者でも分かる！モーダルウィンドウの作り方

Overlay させている背景を jQuery からコントロールしようとしたら、CODEPEN 上でキレイに処理されなかった。

See the Pen MYmoVd by DriftwoodJP (@DriftwoodJP) on CodePen.

知識ゼロで JavaScript/jQuery を触るのも限界なので、ちゃんと勉強しよう。

HTML5 Custom Data Attributes とは

• Using data attributes – Web developer guide | MDN
• 独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP

アクセス方法とツールチップの実例。

• HTML5 カスタムデータ属性「data-*」にJavaScript、jQueryからアクセスする方法 | Dress Cording
• カスタムデータ属性でツールチップ表示するjQueryコンポーネント「data-tooltip.js」 | Dress Cording

Haml での記述方法

ドキュメントに載っていた。

• File: REFERENCE — Haml Documentation

HTML5 Custom Data Attributes

link_to でも、こんな形で書けた。

= link_to "button", "#", class:"btns", data: {tgt: "window1"}

:hyphenate_data_attrs option があり、Rails から利用する場合に整合性をとることを想定していそう。

補遺

jQuery UI の Dialog を利用する場合、デザイン変更にはガッツリ取り組む必要がありそう。

• Dialog | jQuery UI
• jQuery UI のテーマを扱う