Javascript jQuery工具:使用函数调用手动打开覆盖?
我的页面上有几个a标签,它们会触发覆盖:Javascript jQuery工具:使用函数调用手动打开覆盖?,javascript,jquery,overlay,Javascript,Jquery,Overlay,我的页面上有几个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> 这是可行的,但似乎使用load-函数,我页面上的所有javascript
<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>
这是可行的,但似乎使用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"));
}
});
});
有什么建议吗?更新代码:
<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覆盖插件吗?或者你只是想让jQuery工具Overplay插件正常工作?我试着让它正常工作。也许我应该更详细一些。我正在用状态机构建一个游戏,当一个关卡完成时,状态机应该能够在两个关卡之间打开一个覆盖屏幕。所以我需要一个可以调用的函数来打开覆盖图,这就是我在这里要做的。是的,但我想打开一个html文件,我在覆盖图中动态构建它,就像在这里一样:更新我的代码。诀窍是将触发元素包装在锚中,然后使用onBeforeLoad方法在覆盖包装中加载锚href,从而修改锚的行为。
<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>