Featherlight.jsでhtmlを読み込んでみる。

軽めなlightbox系プラグインを探してたら、Featherlight.jsってのがあったんで試してみました。
Featherlight – The ultra slim jQuery lightbox.

<html>
  <head>
    <link href="/css/featherlight.css" rel="stylesheet">
  </head>
  <body>
    <a href="/test.html" data-featherlight="ajax">test</a>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="/js/featherlight.js"></script>
  </body>
</html>

jQueryのプラグインなんで、jqueryと、DLしたfeatherlight.jsと、featherlight.cssを読み込み。

あとは、開きたいページをhrefに指定して、data-featherlight=”ajax”プロパティを追加するだけ。
これだけで、LightBox風な感じで、/test.htmlが表示できます。
お手軽ー。

iframeで表示してるのかと思ったけど、html読み込んでページに埋め込んでるぽい。
ま、中で同じjsを再度読み込んだり、わざわざparent呼んだりしなくていいから操作もお手軽。