Question

我无法在我的网站上很好地显示叠加层，我想要的只是一个带有iframe的简单灯箱，它从点击的链接中拉出href并将其显示在叠加层的顶部。我在我的网站上安装了jQueryTools，所以我想我可以使用它们的叠加功能。这是我的代码：

 $(function(){
    $("body").append('<div class="oiOverlay" id="overlay"><div class="oiContentWrap"></div></div>');
    $("a[rel]").overlay({
        mask: '#000',
        closeOnClick: false,
        onBeforeLoad: function() {
            // grab wrapper element inside content
            var wrap = this.getOverlay().find(".oiContentWrap");
            // load the page specified in the trigger
            wrap.load(this.getTrigger().attr("href"));
        }
    });
});

CSS

#overlay { display: none; width:625px; z-index: 1000; min-height:200px; border:1px solid #000; }

HTML

<a href="http://www.google.com" rel="overlay">Google overlay</a>

我得到的是一个与左边而不是中心对齐的框，后面没有背景/遮罩/叠加效果。我无法弄清楚我错过了什么，这是我编写代码时所遵循的页面：http://jquerytools.org/demos/overlay/styling.html

更新：我放弃了JQuerytools叠加并创建了自己的

jQuerytools使用蒙版覆盖

0 个答案: