【问题标题】:Is jGrowl covering my elements after it fades out?jGrowl 淡出后会覆盖我的元素吗?
【发布时间】:2011-05-04 03:21:06
【问题描述】:

我正在使用 jGrowl 在屏幕上显示一条消息。看起来不错。但是,消息淡出后,jGrowl div 仍然覆盖在它下面的那些元素,所以它们是不可点击的!

这在我的例子中尤为明显,因为我编辑了样式以确保消息显示在屏幕的中心位置。

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

像jGrowl这样被很多人使用的插件真的有这个问题吗?还是因为我做错了什么。

我在 Chrome 中检查了“检查元素”,果然,这是覆盖我页面上其他元素的元素:

<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(); };
}

【问题讨论】:

    标签: jquery jgrowl


    【解决方案1】:

    我不熟悉 jGrowl,但您能检查一下以确保“关闭”事件正在触发吗?

    jGrowl 带有“关闭”窗口的能力,在角落里有一个“X”?如果您实现它并单击“x” - 您是否能够单击所涵盖的项目?

    【讨论】:

    • 我在关闭事件中添加了一些“隐藏”代码,并在显示消息之前添加了一些“显示”代码——它可以工作,虽然它并不漂亮。
    【解决方案2】:

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

    【讨论】:

    • 它没有覆盖“一切”——它只是覆盖了它在显示消息时所覆盖的区域和它周围的一小块区域。
    • 是的,这就是我的意思,在我的测试中没有任何内容。
    • 奇怪——那我一定是在做一些不同的事情。哦,好吧,我已经用解决方案详细说明了我的问题,为任何与我有相同怪癖的人提供了解决方案。
    猜你喜欢
    • 1970-01-01
    • 2011-07-04
    • 1970-01-01
    • 2015-09-08
    • 2014-03-19
    • 1970-01-01
    • 2012-10-08
    • 2012-11-09
    • 2015-07-19
    相关资源
    最近更新 更多