最初からウィンドウを表示するテストです。
※そのまま利用するとこのように最小化ボタンが表示されますが、機能していません。削除の仕方のページも用意していますので参考にしてみてください。
mocha UIの設置方法（mocha_v.09_r178を使用しています。）
最初にmochaUIサイトからライブラリをダウンロードしてください。
http://mochaui.com/
ダウンロードしたファイルを解凍します。
今回はウィンドウを開くだけの機能を実装したいと思います。実装に必要な「cssフォルダとscriptsフォルダ」を設置するhtmlファイルと同じディレクトリにアップロードします。
※ここでは実験していないのですが、もちろんhead内の指定を変更して任意のフォルダにアップもできると思います。テストしてみてください。
実装するhtmlファイルを用意します。また、cssフォルダに入っているstyle.cssは、サンプルページのものですので、削除して大丈夫です。利用するhtmlのcssに差し替えましょう。
<head>内に下記のように記述します。
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/mocha.css" type="text/css" />
<script type="text/javascript" src="scripts/mootools-1.2-core.js"></script>
<script type="text/javascript" src="scripts/mootools-1.2-more.js"></script>
<!--[if IE]>
<script type="text/javascript" src="scripts/excanvas-compressed.js"></script>
<![endif]-->
<!-- <script type="text/javascript" src="scripts/source/Utilities/mocha.js.php"></script> -->
<script type="text/javascript" src="scripts/mocha.js" charset="utf-8"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
MochaUI.NewWindowsFromHTML = new MochaUI.NewWindowsFromHTML();
});
</script>
次にウィンドウの設定をします。
まず、ウィンドウに表示したいdivにclass="mocha"と記述します。さらに、ウィンドウのタイトルとなる<h3 class="mochaTitle">テストのウィンドウ</h3>をdivタグのすぐ下に記述します。下記は、このページで実装したときの例です。
<div class="mocha" id="myWindow01" style="width:300px;height:100px;top:80px;left:580px;">
<h3 class="mochaTitle">テストのウィンドウ</h3>
<p>divにclassのmochaを指定。idは任意です。</p>
</div>
上記のようにstyle="*****"と記述していますが、外部スタイルシートに設定したいところですね。しかし、実は外部スタイルシート例えば、style.cssにこの記述をするとFirefoxの2と3において、top:80px;left:580pxの指定が有効にならず、ブラウザに対してセンター寄せで表示されてしまいます。
ですので、不本意ですが、ウィンドウのスタイルだけは、divに記述するようにしましょう。
これで、とりあえず、ウィンドウを表示できました。
ここで、このページを見て、修正したい箇所が出てくると思います。ページ全体にかけてのスクロールバーが右端にもう一つ出現していることと、最小化ボタン（閉じるボタンの左隣のボタン）がクリックしても動かないことは特に気になるでしょう。
そこで、下記のページでそのカスタマイズ方法を記述してみました。よろしければ、参考にしてください。