twitter-bootstrap HTML5（引导程序）：显示“浮动”错误消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20971051/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 (Bootstrap): Display "floating" error message
提问by Magnanimity
I am busy creating admin panels. These admin panels include various tables, modals and dialogs and submit data via AJAX. When the server encounters an error it sends the error back as the "data" to the AJAX request which must then be displayed. I am looking for a way to display the error message "floating" on the screen for a few seconds. This must pop up on top of everything on the screen (including open modals).
我正忙于创建管理面板。这些管理面板包括各种表格、模式和对话框，并通过 AJAX 提交数据。当服务器遇到错误时，它会将错误作为“数据”发送回 AJAX 请求，然后必须显示该请求。我正在寻找一种在屏幕上显示“浮动”错误消息几秒钟的方法。这必须弹出屏幕上的所有内容（包括打开的模式）。
One way to do this is a javascript alert, but this is not user/mobile friendly. Another way is through a modal/dialog, but this does not work if a modal/dialog is already open. In short, I am looking for a way to display a "floating div" in the center of the screen, no matter where on the page the user has scrolled to or what modals/dialogs are open at that time.
一种方法是使用 javascript 警报，但这对用户/移动设备不友好。另一种方法是通过模态/对话框，但如果模态/对话框已经打开，这将不起作用。简而言之，我正在寻找一种在屏幕中央显示“浮动 div”的方法，无论用户滚动到页面上的哪个位置或当时打开了哪些模式/对话框。
回答by Markus Kottl?nder
You can create an element inside your ajax response callback:
您可以在 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">×</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);
}
});
And the CSS:
和 CSS：
.error-message {
position: fixed;
top: 45%;
left: 50%;
margin-left: -150px;
width: 300px;
z-index: 9999;
}
Adjust the z-index to bring the message to the front.
调整 z-index 以将消息置于最前面。
