【发布时间】: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(); };
}
【问题讨论】: