0

我有一个我试图在页面中心显示的叠加层，我按照 jQuery 工具文档（这是一个糟糕的文档！）来显示它，但它对我来说位置不正确，一直到页面的左侧。

通过一些谷歌搜索，我能够找出问题所在，但不知道如何解决它，这是 jQuery 工具和 jQuery 1.8.0 之间的冲突： https ://github.com/jquerytools/jquerytools/issues/839

但我不确定如何修复它，我无法更改我的 JQuery 库，因为它用于大型产品，更新或降级可能会导致问题。

我能够使用 jQuery 1.8.0 在 JSFiddle 上复制它

http://jsfiddle.net/GL4K9/

Javascript：

jQuery("a[rel]").overlay({
    mask: {zIndex:100,color:'#000000',opacity: 0.5,loadSpeed:'fast'}, onBeforeLoad:function(){
    var wrap = this.getOverlay().find(".contentWrap");
    var html = '<iframe width="100%" scrolling="yes" height="100%" frameborder="0" marginwidth="0" marginheight="0" src="'+this.getTrigger().attr("href")+'">';
    wrap.html(html);
  }
});

HTML 代码：

<div class="container">See the <a href="https://www.google.co.nz/?gws_rd=cr" rel="#overlay" target="_blank">terms and conditions</a>.</div>

<!-- overlayed element -->
<div class="wrapper" id="overlay">
  <div class="contentWrap">     
  </div>
</div>

CSS：

.container { width:400px; margin:0 auto; }
.contentWrap { height:441px; }
.wrapper { display:none; background:#fff; width:800px; padding:10px; }

这是我包含的覆盖代码：

(function(a){a.tools=a.tools||{version:"v1.2.7"},a.tools.overlay={addEffect:function(a,b,d){c[a]=[b,d]},conf:{close:null,closeOnClick:!0,closeOnEsc:!0,closeSpeed:"fast",effect:"default",fixed:!a.browser.msie||a.browser.version>6,left:"center",load:!1,mask:null,oneInstance:!0,speed:"normal",target:null,top:"10%"}};var b=[],c={};a.tools.overlay.addEffect("default",function(b,c){var d=this.getConf(),e=a(window);d.fixed||(b.top+=e.scrollTop(),b.left+=e.scrollLeft()),b.position=d.fixed?"fixed":"absolute",this.getOverlay().css(b).fadeIn(d.speed,c)},function(a){this.getOverlay().fadeOut(this.getConf().closeSpeed,a)});function d(d,e){var f=this,g=d.add(f),h=a(window),i,j,k,l=a.tools.expose&&(e.mask||e.expose),m=Math.random().toString().slice(10);l&&(typeof l=="string"&&(l={color:l}),l.closeOnClick=l.closeOnEsc=!1);var n=e.target||d.attr("rel");j=n?a(n):null||d;if(!j.length)throw"Could not find Overlay: "+n;d&&d.index(j)==-1&&d.click(function(a){f.load(a);return a.preventDefault()}),a.extend(f,{load:function(d){if(f.isOpened())return f;var i=c[e.effect];if(!i)throw"Overlay: cannot find effect : \""+e.effect+"\"";e.oneInstance&&a.each(b,function(){this.close(d)}),d=d||a.Event(),d.type="onBeforeLoad",g.trigger(d);if(d.isDefaultPrevented())return f;k=!0,l&&a(j).expose(l);var n=e.top,o=e.left,p=j.outerWidth({margin:!0}),q=j.outerHeight({margin:!0});typeof n=="string"&&(n=n=="center"?Math.max((h.height()-q)/2,0):parseInt(n,10)/100*h.height()),o=="center"&&(o=Math.max((h.width()-p)/2,0)),i[0].call(f,{top:n,left:o},function(){k&&(d.type="onLoad",g.trigger(d))}),l&&e.closeOnClick&&a.mask.getMask().one("click",f.close),e.closeOnClick&&a(document).on("click."+m,function(b){a(b.target).parents(j).length||f.close(b)}),e.closeOnEsc&&a(document).on("keydown."+m,function(a){a.keyCode==27&&f.close(a)});return f},close:function(b){if(!f.isOpened())return f;b=b||a.Event(),b.type="onBeforeClose",g.trigger(b);if(!b.isDefaultPrevented()){k=!1,c[e.effect][1].call(f,function(){b.type="onClose",g.trigger(b)}),a(document).off("click."+m+" keydown."+m),l&&a.mask.close();return f}},getOverlay:function(){return j},getTrigger:function(){return d},getClosers:function(){return i},isOpened:function(){return k},getConf:function(){return e}}),a.each("onBeforeLoad,onStart,onLoad,onBeforeClose,onClose".split(","),function(b,c){a.isFunction(e[c])&&a(f).on(c,e[c]),f[c]=function(b){b&&a(f).on(c,b);return f}}),i=j.find(e.close||".close"),!i.length&&!e.close&&(i=a("<a class=\"close\"></a>"),j.prepend(i)),i.click(function(a){f.close(a)}),e.load&&f.load()}a.fn.overlay=function(c){var e=this.data("overlay");if(e)return e;a.isFunction(c)&&(c={onBeforeLoad:c}),c=a.extend(!0,{},a.tools.overlay.conf,c),this.each(function(){e=new d(a(this),c),b.push(e),a(this).data("overlay",e)});return c.api?e:this}})(jQuery);
4

0 回答 0