Давайте посмотрим на простейший вариант использования из документации.
<!-- СОЗДАЁМ ТРИГЕРЫ ПРИ ЩЕЛЧКЕ ПО НИМ ПОЯВЛЯЕТСЯ ОВЕРЛЕЙ. При этом в тригере есть атрибут rel. -->
<div id="triggers">
<img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" rel="#mies1"/>
<img src="http://farm4.static.flickr.com/3346/3449388113_71a06b8548_m.jpg" rel="#mies2"/>
</div>
<!-- Содержимое диалога находится в отдельном div
на содержимое ссылается атрибут rel в тригере.
-->
<div class="simple_overlay" id="mies1">
Содержимое диалога.
</div>
<script>
// код вешает оверлей на тригер, при срабатывании тригера в оверлей будет вставлено содержимое из rel
$(document).ready(function() {
$("img[rel]").overlay();
});
</script>
Здесь оаерлей создаётся только однажды, и сам отвечает за свой вызов.
А вы для каждого отображения пытаетесь создать свой оверлей. Улавливаете разницу ?
как варианты решения.
1) Путь Мудреца. наиболее правильный
а) повесить оверлей на кнопку,
$("#update_details[rel]").overlay();
б) селектор элемента с содержимы оверлея указать в rel,
<button rel="#myDialog" id="myButton">
в) post запрос делать внутри обработчика события оверлея
onBeforeLoad(более удобное событие до
отрисовки оверлея), или onLoad (уже после того как оверлей на экране),
г) ответ на запрос, грузить в элемент указанный в rel, или в специальный контейнер (думаю это удачнее)
var wrap = this.getOverlay().find(".contentWrap");
wrap.html(data.success);
д) сам HTML оверлея
<div class="apple_overlay" id="myDialog">
<!-- the external content is loaded inside this tag -->
<div class="contentWrap"></div>
</div>
2) Путь камикадзе.
Каким то образом подчистить следы предыдущего оверлея перед созданием нового.
например при помощи $("#sys_mes_short").remove() - но я не могу гарантировать отсутствие утечек памяти, штатные
методы ликвидации увы отсутствуют.
Да прибудет с тобой сила !
