追記：
閉じ方が全然わからんかった。
でも、やりかたわかりましたよ
・メイン
<script type="text/javascript">
$(function() {
$('.modal-ajax').click(function (e) {
id = $(this).attr("id");
$('.modal').load('/defaults/modal/' + id + '/').modal();
return false;
});
});
</script>
<a href='#' class='modal-ajax' id="5">Demo5</a>
<a href='#' class='modal-ajax' id="8">Demo8</a>
<!-- modal content -->
<div class="modal">
</div>
・AJAXで開かれる方
<script type="text/javascript">
function modalClose()
{
window.parent.$.modal.close();
}
</script>
<a onclick="modalClose();">閉じるよ</a>
親ウインドウの $.modal.closeを操作する感じでOKなんだ。
下記のファイルのCSSを以下のように変更してね。
CSS画像の位置とかは適当にやってね。
http://www.ericmmartin.com/projects/simplemodal-demos/
ie6はシカトします。
<script type="text/javascript" src="/js/jquery.simplemodal.min.js"></script> <link rel="stylesheet" href="/app/webroot/css/jquery.simplemodal.basic.css" type="text/css" media="screen, projection">
・jquery.simplemodal.basic.css
.modal {display:none;}
/* Overlay */
#simplemodal-overlay {background-color:#000; cursor:not-allowed;}
/* Container */
.modal {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
.modal .simplemodal-data {padding:8px;}
.modal code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
.modal a {color:#ddd;}
a.modalCloseImg {background:url(/app/webroot/img/default/cross.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
.modal h3 {color:#84b8d9;}
・適当なhtml
<script type="text/javascript">
$(function() {
$('.modal-ajax').click(function (e) {
id = $(this).attr("id");
$('.modal').load('/defaults/modal/' + id + '/').modal();
return false;
});
});
</script>
<a href='#' class='modal-ajax' id="5">Demo5</a>
<a href='#' class='modal-ajax' id="8">Demo8</a>
<!-- modal content -->
<div class="modal">
</div>
こんな感じ。
