tohokuaikiのチラシの裏

技術的ネタとか。

Jsのモーダルウィンドウはprototype window classをやめて、livepipe windowにした

JavaScript

Prototype.js 1.6 で動かなくなったprototype window class

Prototype.jsベースのモーダル（だけじゃないけど）ウインドウを作成するライブラリにPrototype Window Classを使ってたんだけど、これがPrototype.jsが1.6になるとI.E.で動かなくなるって言うのでどーにもこーにも困ってました。

動かなくなる報告は、こっちに詳しいのだけど。I.E7ではなんとかなったんだけど、I.E.6で動かないので、もーどうしようもないなーって感じで。どっちかっていうと、Prototype.jsの方にあれなのかなー？って。

まぁ、Prototype.jsの1.5を使ってればいいじゃんっていう、確かにその意見もありなんですが。(1.6やたらファイル大きいし)


で、prototype window classは止まっちゃってるし、このあたりを直す気力も技術力もないヘタレな私は別のを探してたところです。

Livepipe UI

JQueryベースのはいくつかあったのだけど、Prototype.jsベースのが無くって・・・・。Prototype.jsっておっさんくさいイメージがあるようですが、まぁとりあえず使い続けるわけで・・・。

Googleで「JavaScript モーダル Prototype.js」とかで検索してあたったのが、Livepipe UI

んだけど、これを紹介している記事は色々とあるんだけどAPIの紹介とかは無くって、「んがー」って思ってたんだけど、このページを参考にモーダルを作ってみたら、これが！！！素晴らしい。

何より、prototype window classはiframeで作ってたのでdocumentが違っちゃってたのが、Livepipe Windowでは同じdocument内に作ってくれるのでJavascriptの空間も同一で嬉しい。

作ったWindowのCSSを与えるんも簡単だし、こりゃー便利。


難点は、ドキュメントが見当たらないのでGoogle Groupあたり＆ソースを読みつつちまちまと作っていくしかないな。

とりあえず、モーダルウインドウ

<html>
<head>
<style>
body{
	background-color: #cccccc;
}
#control_overlay {
	background-color:#000;
}
.window {
     background-image:url("./window_background.png");
     background-position:top left;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     padding:10px;
     font-weight:bold;
     color:#fff;
     text-align:center;
     min-width:150px;
     min-height:100px;
}
.window .window_contents {
     margin-top:10px;
     width:100%;
     height:100%;
}
.window .window_header {
     text-align:center;
}
.window .window_title {
     margin-top:-7px;
     margin-bottom:7px;
     cursor:move;
}
.window .window_close {
     display:block;
     position:absolute;
     top:4px;
     left:5px;
     height:13px;
     width:13px;
     background-image:url("./window_close.gif");
     cursor:pointer;
     cursor:hand; 
}
</style>
<script src="./lib/prototype.js"></script>
<script src="./lib/effects.js"></script>
<script src="./lib/prototype.js"></script>
<script src="./lib/scriptaculous.js"></script>
<script src="./src/livepipe.js"></script>
<script src="./src/window.js"></script>
<script>
Event.observe(window, 'load', function(){
    //Modal Window
    var modal_header = new Element('div',{className: 'window_header' });
    var modal_title = new Element('div',{className: 'window_title' });
    modal_header.insert(modal_title); // モーダルの頭部分のDOMを追加
    var modal_close = new Element('div',{className: 'window_close'});
    modal_header.insert(modal_close); // モーダルの頭部分のDOMを追加
    var modal_contents = new Element('div',{className: 'window_contents' });
    var modal = new Control.Modal($('modal'),{
        overlayOpacity: 0.75,
        className: 'window',
        closeOnClick: modal_close, // これを定義しない場合はモーダル外のエリアをクリックするとCloseする
        fade: true
    });
    modal.container.insert(modal_header);　// モーダル自身にHeadを追加
    modal.container.insert(modal_contents);// モーダル自身にContents部分を追加
    // modal.open(); // 自動的にOpenさせたい場合。
});
</script>
</head>
<body>
<a href="tmp.html" id="modal">open modal</a>
</body>
</html>

別枠にあるtmp.htmlをモーダル内部として呼び出す。
最初、えー、タグに書くのかーって思ったけど、これってJSがOFFでも意味が通じるやり方なんですね。*1

tmp.htmlは、内部だけ呼ばれてDOMとしてParseされるので

aaaaaaaaaa<br>
bbbbbbbbbb<br>
<span onclick="Control.Modal.current.close();">close</span>

みたいに書いておけば、「close」を押したところでモーダルがCloseする。

自動的にPopUpしたい場合も簡単。

*1:あとでよく見たら、iframeのbodyタグの中身をごそっと持ってきているという結構「ほっほー」な感じの手法。