Question

屏幕顶部显示错误消息（有条件地呈现），如果用户位于屏幕底部，则他必须向上滚动才能查看错误。

所以我试图在用户的视图中显示该错误。

我正在使用Primefaces p:messages来显示错误。我还尝试使用p:sticky组件使错误消息变得粘滞。

喜欢：

<p:messages id="errorMessage"/> <p:sticky target="errorMessage"/>

它似乎没有与之合作。我可以用primefaces做些什么，或者我应该使用纯CSS和jQuery来实现这个功能吗？

Answer 1

您可以将display: fixed;规则添加到该元素。它应该工作。

如果您可以使用position，top，left或right规则更改元素的bottom。请确保您为元素提供更高的z-index值，否则可能会被高z-index的其他元素隐藏。

Answer 2

您正在寻找的正确CSS属性是：

position: fixed;

但是，您可能还想添加z-index和定位值（这将为您提供一个良好的开端，然后根据您的喜好定位）：

position: fixed;
/*this value can be larger or smaller depending on other elements*/
z-index: 9; 
top: 0;
left: 0;

请注意，如果此元素位于具有position: relative的父容器中，则此元素不会像您期望的那样坚持。

此外，您应该为粘性元素添加一个类名，以便能够定位它。 E.G。

<p:sticky class="sticky" target="errorMessage" />

具有该类名的最终CSS应如下所示：

.sticky {
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
}

Answer 3

你可以使用这个

Use Position:fixed property

在此演示https://jsfiddle.net/dineshkanivu/tddsL50c/1/

这是Javascript

$(document).ready(function(){
//$("#koo").fadeOut();

$("#foo").click(function(){

$(".alertbox").fadeIn();


})


})

这是CSS

.alertbox{width:300px; height:100px; padding:30px; position:fixed;top:2%; left:2%; 
margin-top:-10px;margin-left:10px; background:#000; color:#fff; display:none}

如何制作错误消息div粘贴？

3 个答案: