如何破坏隐藏其他东西的咆哮div组件

Question

在我的jsf页面上，我会向growl组件发送一条消息。

<p:growl id="growlLong" for="growlLong" showDetail="true" life="10000" sticky="false"/>

一旦10秒结束，或通过单击X解除，发生的问题是growl下面的元素是不可选择的。通过检查页面上的组件，看起来像实际的div停留在那里并阻止它下面的内容。

<?xml version="1.0" encoding="UTF-8"?>
<div class="ui-growl-item">
   <div class="ui-growl-icon-close ui-icon ui-icon-closethick" style="display: none;" />
   <span class="ui-growl-image ui-growl-image-info" />
   <div class="ui-growl-message">
      <span class="ui-growl-title">Success!</span>
      <p>Configuration successfully saved.</p>
   </div>
   <div style="clear: both;" />
</div>

所以，问题是 - 如何让它消失并保持下面的内容仍然可用？

这是问题的截图，如“inspect elements”所示，蓝色框是现有链接，红色框是被解雇的咆哮。在蓝色框内，我们无法单击红色框所覆盖的部分。

Answer 1

这个话题可能比较旧，但我最近偶然发现了它： 展示正在运行但我的版本不是我给.ui-growl CSS类的高度 AND 宽度的原因。在展示中，容器的大小仅由其内容定义，因此如果没有要显示的项目则为0。

我把我的高度定义移到了.ui-growl-item（无论如何更合适），现在它的工作就像一个魅力。

Answer 2

虽然希望能够告诉咆哮不要在DOM中留下<div id="growlLong_container">结构，但简单的解决方案是只选择它并使用您喜欢的方法移除它来操纵DOM。

ID似乎是您传递给咆哮的ID：id="growlLong" +“_ container”。使用DOM ID，只需选择并删除它即可。

是的，能够让咆哮不让它留在那里会很好。但是，与尝试寻找解决方案所花费的精力相比，回报会有所减少。它似乎远远超过你应该使用黑客并删除它的点。记下它，继续前进。在代码中留下评论，这就是你进行DOM操作的原因。可能而不是删除<div>是调整z-index以使其低于UI元素的可能性。另一种可能性是在样式中添加display:none;。显然，编码使得如果<div>不存在则没有任何问题。验证下一次使用growl仍然可以正确执行。

询问Growl discussion group。以a bug with growl提交。如果表达方式使咆哮不会在DOM中留下这样的东西，请重新访问代码并应用它。

至于删除它，如果你有可用的JavaScript，它就像：

一样简单

document.getElementById("growlLong_container").remove();

更具体地说，我们确实需要有关您的代码和运行环境的更多信息。

应删除<div>

的“解决方案”

希望您会收到一个答案，允许咆哮隐藏/删除元素。但是，目前似乎没有。

以下脚本应该每隔250ms检查一次，看看<div id="growlLong_container">是否已输入DOM。将<div>输入DOM后，脚本将等待10秒。如果{10}之后存在<div>，则会将其删除。该脚本是一个黑客。但它应该工作。

您需要将其放置在页面上，或者包含在标签中（如此处所示），或者放在没有第一行的文件中：<script class="code" type="text/javascript">和最后一行：{{1删除。如果您使用单独的文件，则需要以与</script>，jquery.js，foundation.js类似的方式包含该文件。

foundation.topbar.js and foundation.tooltip.js

我希望你找到一个不需要像这样的黑客的答案。但是，这应该可以解决您的问题，至少在一定程度上。使用该脚本，即使用户提前解除咆哮，使用这些控件的预防也将持续至少10秒到10.25秒。通过评论中提到的两个屏幕截图，可能会更改脚本，以便检测用户是否解除了增长，然后立即删除<script class="code" type="text/javascript"> (function () { "use strict"; const maxGrowlTime = 10000; //In milliseconds const checkFrequency = 250; //In milliseconds var intervalTimer=0; var foundGrowl=false; function dismissGrowl() { var growlId; growlId = document.getElementById("growlLong_container"); if(growlId) { growlId.parentNode.removeChild(growlId); } foundGrowl=false; setGrowlCheckInterval(); } function checkForGrowl() { var growlId; if(foundGrowl) { return; } growlId = document.getElementById("growlLong_container"); if(growlId) { foundGrowl=true; clearInterval(intervalTimer); setTimeout(dismissGrowl, maxGrowlTime ); } } function setGrowlCheckInterval() { intervalTimer = setInterval(checkForGrowl, checkFrequency ); } setGrowlCheckInterval(); })(); </script> 。这样可以更好地响应用户输入。

此解决方案假定在您发布<div>之前，DOM中不存在<div id="growlLong_container">，之后不需要<p:growl id="growlLong"。这很可能是因为潜水的ID似乎由您传递咆哮的ID组成。

主要是，此问题看起来像组件之间的错误或不兼容问题。