Question

我的页面上有几个“a”-tags触发叠加：

<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>

jQuery工具：使用函数调用手动打开Overlay？

1 个答案: