Question

我正在使用此代码将外部HTML文件加载到叠加层中：

<div class="apple_overlay" id="overlay">
<div class="contentWrap"></div>
</div>

<script>
$(function() {

    $("a[rel]").overlay({

        mask: 'gray',
        effect: 'apple',

        onBeforeLoad: function() {

            var wrap = this.getOverlay().find(".contentWrap");

            wrap.load(this.getTrigger().attr("href"));

        }
    });
});

要在一个圆圈中添加一个X作为关闭按钮，我使用了这个CSS：

 #overlay .close {
    float:right!important;
    padding:3px 6px!important;
    display:block;
    background:#000!important;
    right:14px!important;
    position:absolute!important;
    color:#fff!important;
    font-family:arial!important;
    font-weight:bold!important;
    margin:6px 6px!important;
    opacity:.65!important;
    filter:initial!important;
    text-shadow:initial;
    border-radius:12px!important;
    font-size:18px!important;
 }

它显示完美，当我点击它时，叠加层关闭，一切都很好。问题是，当页面最初加载时，圆圈中的X已经可见。打开并关闭在叠加层中打开的链接后，它不会显示。但是在初始页面加载时，它位于页面底部。

如何隐藏其初始状态？我怀疑它'隐藏在jquery.tools.min.js代码中，可能是引用“a.tools.overlay”的地方之一，但所有代码都是如此不透明我知道如果我只是搞砸了改变它。

任何人都可以告诉我没有做的明显且更简单的方法吗？谢谢！

Answer 1

我最后只做了显而易见的事情，并在加载外部文档的A标记中添加了一个函数：

<a href="anExternal.html" onclick="showX();" rel="#overlay" style="text-decoration:none;">

然后showX（）就是：

function showX() {
    $("#overlay .close").css("display", "block");
}

这允许我将.close的初始CSS设置为display：none，现在它可以正常工作。

页面加载时可以看到叠加层中的关闭按钮，我无法弄清楚如何隐藏它

1 个答案: