Question

执行一个过程后，屏幕顶部会出现一个闪光灯，其中包含一些基本信息（例如“已添加表格”）。发生这种情况时，当闪光灯从顶部下降时，页面中的所有元素都会向下移动。闪光灯停留一会儿，然后消失。闪光灯消失后，文字会移到原来的位置。

如何让闪光灯不移动页面上的元素？

flash的代码是jQuery，我不熟悉。这是代码：

function controller_jsSetError(type, msg) {

   $('#errorMessage').html(msg);
   if(type == 'NONE') {
      $('#errorMessage').hide();
   }
   else {
      $('#errorMessage').attr('class','ui-state-error ui-corner-all');
      $('#errorMessage').show();
   }
   if(type == 'STATUS') {
      $('#errorMessage').attr('class','ui-state-highlight ui-corner-all');
      $('#errorMessage').delay(3000).fadeOut('slow');
   }
}

谢谢你的时间！

Answer 1

这是CSS的更多问题。您的代码只显示和隐藏Flash消息。您需要的是将这些消息框置于绝对位置。

请参阅此DEMO！

<div class="outerBox">
    <span id="errorMessage">ERROR!</span>
    <p>Some text</p>
</div>

<button onclick="$('#errorMessage').toggle();">show/hide error message</button>

CSS：

.outerBox {
    background:#eee;
    padding:20px;
    position:relative;
    width:100%;
}

#errorMessage {
    display:none;
    background:red;
    padding:30px;
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

Answer 2

Try adding a preventDefault() at the beginning of your code- see below. 

function controller_jsSetError(type, msg) {
event.preventDefault();
$('#errorMessage').html(msg);
if(type == 'NONE') {
  $('#errorMessage').hide();
 }
else {
  $('#errorMessage').attr('class','ui-state-error ui-corner-all');
  $('#errorMessage').show();
 }
if(type == 'STATUS') {
  $('#errorMessage').attr('class','ui-state-highlight ui-corner-all');
  $('#errorMessage').delay(3000).fadeOut('slow');
  }
 }

如何防止jQuery flash移动文本？

2 个答案: