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

【问题标题】：IE10 does not show the transparent DIV/waiting messageIE10 不显示透明的 DIV/等待消息
【发布时间】：2017-02-27 20:17:27
【问题描述】：

有一个 DIV 容器，它充当带有加载消息的透明背景。

DIV 容器的 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 显示：块，一旦执行完成，将放回显示 :none 用于透明 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() 消息，然后带有消息的透明 DIV 显示在 IE10 中。一旦我再次删除警报，它就不会出现。

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

为什么它没有被触发或者我在这里遗漏了什么。

【问题讨论】：

标签： jquery html css ajax internet-explorer-10

【解决方案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)
})

【讨论】：

你的意思是什么条件？他的ajax有async : false所以css被连续修改，ajax被阻塞了。
我想说在ajax调用成功之前调用ajax()之后的第二个$("#generatingexcel").css。
对不起 :( 。请创建一个 jsfiddle 或链接以检查您的问题