Question

让DIV容器充当带加载消息的透明背景。

DIV conatainer的HTML代码

<div id="generatingexcel" style="display:none; position: fixed; width: 100%;height: 100%; z-index: 999; top: 0; left: 0; background:rgba(25, 25, 25, 0.5);">
    <div style="color: #fff; font-size: 24px; position: absolute; left: 500px; top: 400px;">
        <strong>Generating Excel Please wait....</strong>
    </div>
</div>

在ajax成功函数中执行ajax调用和第一件事是使透明DIV显示：阻塞，一旦执行完毕，将放回display：none for Transparent DIV。

$("#generatingexcel").css("display", "block");

$.ajax({
    type : "GET",
    url : url,
    contentType : "application/json; charset=utf-8",
    success : function (msg) {
        //code
    },
    async : false,
    error : function (err) {
        alert(err);
    }
});

$("#generatingexcel").css("display", "none");

它在FF中工作正常但由于某些原因在IE10中透明的DIV和加载消息没有显示出来。

所以只是为了调试我在显示块行之后添加了一个alert（）msg，然后在IE10中显示带有消息的透明DIV。一旦我再次删除警报，它就不会显示出来。

$("#generatingexcel").css("display", "block");
alert("Wait");

为什么它不会触发或我在这里遗漏任何东西。

Answer 1

你不能同时添加两个条件。如果你这样做，只会触发最后的条件。您也可以使用show()/hide()方法来显示无元素

解决方案1 

$("#generatingexcel").show();

$.ajax({
    type : "GET",
    url : url,
    async : false,
    contentType : "application/json; charset=utf-8",
    success : function (msg) {
        $("#generatingexcel").hide();
    },
    error : function (err) {
        alert(err);
    }
});

解决方案2

您可以将其添加到<head>代码

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" >

此处找到解决方案：Solution to IE10 Ajax Problem

<强>更新

好吧我不知道为什么叠加没有显示IE但我找到了解决方案。

插入持续时间为1的setTimeout()。我尝试使用大小的Json数据。

请尝试：

$(document).ready(function(){
    $("#generatingexcel").css("display", "block");
    setTimeout(function(){
        $.ajax({
            type : "GET",
            url : url,
            cache: false,
            async : false,
            contentType : "application/json; charset=utf-8",
            dataType: "json",
            success : function (msg) {
                $("#generatingexcel").css("display", "none");
            },
            error : function (err) {
                alert(err);
            }
        });
    },1)
})

IE10不显示透明的DIV /等待消息

1 个答案: