HTML5 のカスタムデータ属性を使ってポップアップウインドウを制御する

よくあるポップアップ

onclick イベントにて window.open 関数でポップアップを表示するよくある方法。

<a href='#' onclick="window.open('hoge.html', 'target', 'width=300, height=200');">
ポップアップ</a>

この方法の問題点は、href にリンク先が設定されていないため、JavaScript を有効にしていない場合にリンク先のページを見るすべがないことです。

これを解決するには、以下のように href の指定先を JavaScript で読むことで解決します。

<a href='hoge.html' onclick="window.open(this.href,'target','width=300,height=200');">
ポップアップ</a>

でもこれだと、HTML 中に JavaScript が埋め込まれていてイマイチです。

onclick を使わない

一般的にページコンテンツの中に、振る舞いを扱う JavaScript を含めるのは望ましくありません。
ページアンカーに class 属性を割り当てて、

<a href='hoge.html' class="popupwindow">ポップアップ</a>

JavaScript (以下の例ではｊQuery)により外部からイベントをバインドすることで改善できます。

$(function() {
  $("a.popupwindow").click(function(event){
    event.preventDefault();
    window.open($(this).attr('href'), "target",
      "width=300,height=200,resizable=yes,scrollbars=yes");
  });
});

でもこれ、サイズなどの見た目に関する定義が JavaScript 側に移ってきていてイマイチです。

jQueryプラグインでも改善できますが

jquery.popupwindow.js を使うと、

<a href="hoge.html" class="popupwindow" rel="height:400,width:400">
ポップアップ1</a>

<a href="hoge.html" class="popupwindow" rel="windowCenter">
ポップアップ2</a>

HTML 側では見た目に関する定義を行い、

var profiles = {
  window800:    { height:800, width:800, status:1},
  window200:    { height:200, width:200, status:1, resizable:0 },
  windowCenter: { height:300, width:400, center:1 }
};

$(function() {
  $(".popupwindow").popupwindow(profiles);
});

のように JavaScript 側で動作を定義できます。
profiles として共通的に定義したサイズを使うこともできますし、それぞれにポップアップのサイズなどを定義することもできます。

HTML5 のカスタムデータ属性を使う

HTML5 では、構造内に独自に定義できるカスタムデータ属性が使えます。
定義はこちら
data- に続く属性を自由に作成でき、拡張値を埋め込むことができます。

<a href="hoge.html" class="popupwindow" data-width="300" data-height="200" title="popup">
ポップアップ</a>

として、

jQuery側で以下のように書くことができます。

$(function() {
  $("a.popupwindow").click(function(event){
    event.preventDefault();
    var href   = $(this).attr("href"),
        width  = $(this).data("width"),
        height = $(this).data("height");
    window.open(href, "targetName", "width=" + width + ",height=" + height + "");
  });
});

jQueryでは data() メソッドで読取が楽チンです。
古いjQueryでは .data() メソッドが使えないので、$(this).attr("data-width"); のようにする必要があります。