Jquery - 如何禁用整个页面 [英] Jquery - How to disable the entire page
问题描述
我有这个ajax事件
function save_response_with_ajax(t){
var form = $('#edit_'+t);
var div = $('#loading_'+t);
$.ajax({
url: form.attr("action"),
type: "POST",
data: form.serialize(),
cache: false,
beforeSend: function(){
form.hide();
div.show();
},
complete: function(){
div.hide();
form.show();
},
success: function (result) {
}
});
}
一切正常,但我想添加在前/完成ajax事件之前将整个页面(内容/正文)变成灰色的可能性,就像它是一个模态(像这样 http://jqueryui.com/demos/dialog/#modal ,但没有对话框)
And everything works fine, but I want to add (if it's possible) the hability of turning the entire page (the content/body) into gray while before/complete ajax events, like if it were a modal (like this http://jqueryui.com/demos/dialog/#modal but without the dialog)
有办法吗?
提前感谢
Javier Q。
推荐答案
这样做的一种方法是使用一个重叠元素填充整个页面。如果叠加层元素具有半透明背景颜色,则会完全灰化页面: http://jsfiddle.net/SQdP8/1/ 。
A way of doing this is having an overlay element which fills the entire page. If the overlay element has a semi-transparent background color, it grays out the page completely: http://jsfiddle.net/SQdP8/1/.
给它一个高 z-index
,使其位于所有其他元素之上。这样,它正确呈现,它捕获所有事件(并且不会通过它们)。
Give it a high z-index
so that it's on top of all other elements. That way, it renders correctly, and it catches all events (and won't pass them through).
#overlay {
background-color: rgba(0, 0, 0, 0.8);
z-index: 999;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
}
这篇关于Jquery - 如何禁用整个页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!