Question

我正在使用jGrowl在屏幕上显示消息。看起来不错。但是，在消息淡出之后，jGrowl div仍然覆盖了它下面的那些元素，因此它们不可点击！

在我的情况下这是特别值得注意的，因为我编辑了样式以确保消息显示在屏幕的中心位置。

div.jGrowl.center {
    height:             50%;
    top:                25%;
    width:              50%;
    left:               25%;
}

像许多人使用的jGrowl这样的插件是否真的存在这个问题？或者也许是因为我做错了什么。

我在Chrome中使用“Inspect element”进行了检查，果然，这是覆盖我页面上其他元素的元素：

<div id="jGrowl" class="center jGrowl">
<div class="jGrowl-notification"></div>
</div>

更新 - 这是解决方案：

$("#jGrowl").show();
$.jGrowl("my message", {
    beforeClose: function(e,m) {
        $("#jGrowl").hide();
    }
});

ELABORATION - 在尝试不同的事情后，我发现下面是最好的解决方案。在页面加载时为这些事件添加默认设置：

$(function () {
    $.jGrowl.defaults.beforeOpen = function(e,m) { $("#jGrowl").show(); };
    $.jGrowl.defaults.close = function(e,m) { $("#jGrowl").hide(); };
}

Answer 1

我不熟悉jGrowl，但你可以检查以确保“关闭”事件正在被解雇吗？

jGrowl能够“关闭”窗口，角落里有一个“X”吗？如果您实现并单击“x” - 您是否可以单击所涵盖的项目？

Answer 2

在我的浏览器Chrome 12.0.742.16中淡出后，没有div覆盖所有内容。你有可能做错了什么但没有测试用例我就说不出来了。

jGrowl淡出后是否覆盖了我的元素？

2 个答案: