Инструменты jQuery: открыть оверлей вручную с помощью вызова функции?

Question

На моей странице есть несколько тегов "a", которые вызывают наложение:

<a href="prelevel.htm" rel="#overlay" id="lvl1" style="text-decoration:none"></a>
<a href="prelevel.htm" rel="#overlay" id="lvl2" style="text-decoration:none"></a>    

Теперь я хочу открыть один из этих оверлеев с помощью вызова функции. Я попробовал несколько вещей и, наконец, пришел к этому решению:

function openOverlay(id){
    $("a[id=" + id + "]").overlay().load();
}

Это работает, но кажется, что с функцией load () весь код javascript на моей странице выполняется снова, и это приводит к разрушению моего пользовательского интерфейса.

Я использую эту функцию для создания моих оверлеев:

$(function() {
      $("a[rel]").overlay({
        api : true,
        mask : '#DCDBDB',
        effect : 'apple',
        onBeforeLoad : function() {
                 var wrap = this.getOverlay().find(".contentWrap");
                     wrap.load(this.getTrigger().attr("href"));
            }
        });
});

Есть предложения?

Answer 1

Обновлен код:

<script type="text/javascript">
$(document).ready(function(){

  $("a#lvl1").overlay({
    onBeforeLoad: function() {

    // grab wrapper element inside content
    var wrap = this.getOverlay().find(".contentWrap");

    // load the page specified in the trigger
    wrap.load(this.getTrigger().attr("href"));

    }
  });

});
</script>

<!-- HTML Link-->
<a href="prelevel.htm" rel="#overlay" id="lvl1" style="text-decoration:none">
    <button type="button">Show external page in overlay</button>    
</a>

<!-- Overlay Container-->
<div class="apple_overlay" id="overlay">
    <div class="contentWrap"></div>
</div>