javascript - HTML5( Bootstrap ): Display "floating" error message

Question

我正忙于创建管理面板。这些管理面板包括各种表格、模式和对话框，并通过 AJAX 提交数据。当服务器遇到错误时，它会将错误作为“数据”发送回 AJAX 请求，然后必须显示该请求。我正在寻找一种方法来在屏幕上显示“ float ”错误消息几秒钟。这必须弹出在屏幕上的所有内容之上(包括打开的模式)。

执行此操作的一种方法是 javascript 警报，但这对用户/移动设备不友好。另一种方法是通过模态/对话框，但如果模态/对话框已经打开，则此方法不起作用。简而言之，我正在寻找一种在屏幕中央显示“ float div”的方法，无论用户滚动到页面上的哪个位置或者当时打开了哪些模式/对话框。

Answer 1

您可以在 ajax 响应回调中创建一个元素:

$.ajax({
  url: "your-script.php",
  done: function(response) {
    // set the message to display: none to fade it in later.
    var message = $('<div class="alert alert-error error-message" style="display: none;">');
    // a close button
    var close = $('<button type="button" class="close" data-dismiss="alert">&times</button>');
    message.append(close); // adding the close button to the message
    message.append(response); // adding the error response to the message
    // add the message element to the body, fadein, wait 3secs, fadeout
    message.appendTo($('body')).fadeIn(300).delay(3000).fadeOut(500);
  }
});

还有 CSS:

.error-message {
    position: fixed;
    top: 45%;
    left: 50%;
    margin-left: -150px;
    width: 300px;
    z-index: 9999;
}

调整 z-index 以将消息置于最前面。