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

memo.

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

> * [jQuery 簡単にモーダルウィンドウを実装する方法 (プラグイン不要) | Stronghold](http://zxcvbnmnbvcxz.com/jquery-easy-modalwindow/)
> * [初心者でも分かる！モーダルウィンドウの作り方](http://syncer.jp/jquery-modal-window)

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](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes)
> * [独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP](http://www.html5.jp/tag/attributes/data.html)

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

> * [HTML5 カスタムデータ属性「data-*」にJavaScript、jQueryからアクセスする方法 | Dress Cording](http://dresscording.com/blog/html5/custom_data_attribute.html)
> * [カスタムデータ属性でツールチップ表示するjQueryコンポーネント「data-tooltip.js」 | Dress Cording](http://dresscording.com/blog/html5/data_tooltip_js.html)

## Haml での記述方法

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

> * [File: REFERENCE — Haml Documentation](http://haml.info/docs/yardoc/file.REFERENCE.html#html5_custom_data_attributes)
>
> HTML5 Custom Data Attributes

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

“`haml
= link_to “button”, “#”, class:”btns”, data: {tgt: “window1”}
“`

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

## 補遺

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

> * [Dialog | jQuery UI](http://jqueryui.com/dialog/)
> * [jQuery UI のテーマを扱う](http://www.ibm.com/developerworks/jp/web/library/wa-jquerythemes/)
[/markdown]