![](/img/trans.png)
[英]How to disable hover text boxes on entire SharePoint survey page?
[英]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但没有对话框)
有办法做到这一点吗?
提前致谢
哈维尔Q.
这样做的一种方法是使用覆盖元素填充整个页面。 如果overlay元素具有半透明背景颜色,则它会完全灰化页面: http : //jsfiddle.net/SQdP8/1/ 。
给它一个高z-index
,使它在所有其他元素之上。 这样,它正确呈现,并捕获所有事件(并且不会通过它们)。
#overlay {
background-color: rgba(0, 0, 0, 0.8);
z-index: 999;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
}
你可以试试
$("body").append('<div id="overlay" style="background-color:grey;position:absolute;top:0;left:0;height:100%;width:100%;z-index:999"></div>');
然后只是使用
$( “#覆盖”)删除()。
摆脱它。
快速而肮脏。
这是我正在使用的完整解决方案:
以下是部分:
用于叠加的CSS。 “fixed”用于覆盖整个页面内容,而不仅仅是屏幕高度和宽度。 您可以使用背景颜色或gif
附加到jQuery Ajax调用的“beforeSend”事件。 根据需要创建叠加并显示它。
完成请求后,它将从DOM中删除叠加层
CSS:
.request-overlay {
z-index: 9999;
position: fixed; /*Important to cover the screen in case of scolling content*/
left: 0;
top: 0;
width: 100%;
height: 100%;
display: block;
text-align: center;
background: rgba(200,200,200,0.5) url('../../Images/submit-ajax-loader.gif') no-repeat center; /*.gif file or just div with message etc. however you like*/
}
JavaScript的:
$.ajax({
url: '/*your url*/',
beforeSend: function () {
$('body').append('<div id="requestOverlay" class="request-overlay"></div>'); /*Create overlay on demand*/
$("#requestOverlay").show();/*Show overlay*/
},
success: function (data) {
/*actions on success*/
},
error: function (jqXhr, textStatus, errorThrown) {
/*actions on error*/
complete: function () {
$("#requestOverlay").remove();/*Remove overlay*/
}
});
使用jQuery ajaxStart()
将Div附加到文档中。 使用某种形式的半透明文档将其设置为文档的大小。 然后在ajaxStop()
上删除它。
尝试在“beforeSend”功能期间添加叠加层:
$("body").prepend("<div class=\"overlay\"></div>");
$(".overlay").css({
"position": "absolute",
"width": $(document).width(),
"height": $(document).height(),
"z-index": 99999,
}).fadeTo(0, 0.8);
var modal = $('<div>')
.dialog({ modal: true });
modal.dialog('widget').hide();
setTimeout(function() { modal.dialog('close'); }, 2000); // to close it
这是一个演示: http : //jsbin.com/avoyut/3/edit#javascript,html,live
不要忘记调用modal.dialog('close');
结束一切!
这样你就可以获得实际对话框模态代码,调整大小,禁用等等的好处。
希望这有助于确定
今天我一直在寻找适合所有IE浏览器的解决方案。 我拿了@pimvdb
和@Ash Clarke
的代码以及他的评论,他提到了background-color: black; opacity: 0.8; may also work. For IE it will just be completely black.
background-color: black; opacity: 0.8; may also work. For IE it will just be completely black.
并在下面找到了解决方案:
$("#first-div").prepend("<div class=\"overlay-example\"></div>");
var height1 = $("#first-div").height();
var width1 = $("#first-div").width();
$(".overlay-example").css({
"background-color": "black",
"z-index": "9999999",
"position": "absolute",
"width": width1,
"height": height1,
"display": "none"
}).fadeTo(0, 0.0001);
在IE8,IE9上面测试过。 无法检查IE7。 如果您发现错误,将很高兴更新我的洗礼。 (这也有助于我更新我的解决方案:))
谢谢@pimvdb
和@Ash Clarke
您可能希望向用户提供某些事情正在发生的指示,而不仅仅是空白/灰色屏幕。 我会建议某种加载gif,例如,看看这个 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.