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

memo.

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

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

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

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

HTML5 Custom Data Attributes とは

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

Haml での記述方法

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

HTML5 Custom Data Attributes

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

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

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

補遺

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