Question

输入按钮在点击事件上调用javascript。

<input id="ToolbarStatusSubmitHtmlInputButton" type="button" value="Submit" runat="server"  visible="True" enableviewstate="true" onclick="callfunction()"/>

The onclick 'callfunction' is as follow

callfunction: function() {
        showparentOverlay();
        $.ajax({
            url: url,
            type: "GET",
            async: false,.....

 showparentOverlay: function() {
        $("#parentOverlay").removeClass('hideOverlay').addClass('showOverlay');
    },

Callfunction做了2件事

1）通过删除和添加类

来更改DOM元素

2）进行Ajax调用故意使async为false，从服务中检索值并从用户处获得确认。

问题仅出现在IE浏览器中，showparentOverlay（透明div）在ajax服务调用完成之前不显示。

但是，如果AJAX异步设置为true，则显示叠加层。

任何人都可以帮我解决这个问题，我可以在建立服务连接并设置服务的异步时显示透明覆盖 - 假。

由于

Answer 1

我建议将async选项设置为true并使用success功能加载叠加层...

$.ajax({
   url: url,
   type: 'GET',
   success: function(data){
      //Show Overlay here
   }
});

这将调用该服务，成功后将打开您的覆盖。

Answer 2

试试这个：

  function oninputclick()  {
    document.getElementById("window").style.width = "100%";
        
    $.ajax({
      async: false,
      type: 'POST',
      dataType: 'html',                                
      success: function (result) {
        // success do something                   
      },
      complete: function () {
        // enable this when posting to server
        //setTimeout(function () { document.getElementById("window").style.width = "0%"; }, 3000);
      }      
    });
    //for test only. use this inside the complete function.
    setTimeout(function () { document.getElementById("window").style.width = "0%"; }, 3000);
  }

            .overlay {
                height: 100%;
                width: 0;
                position: fixed;
                z-index: 9999999;
                top: 0;
                left: 0;
                background-color: rgb(0,0,0);
                background-color: rgba(0,0,0, 0.9);
                overflow-x: hidden;
                transition: 0.5s;
            }

            .overlay-content {
                position: relative;
                top: 25%;
                width: 100%;
                text-align: center;
                margin-top: 30px;
            }           

            .overlay a {
                padding: 8px;
                text-decoration: none;
                font-size: 36px;
                color: #f1f1f1;
                display: block;
                transition: 0.3s;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="window" class="overlay">  
  <div class="overlay-content">
    <a href="javascript:void(0)" id="msgText">Loading...</a>                
  </div>
</div>

<input type="button" value="Submit" runat="server"  visible="True" onclick="oninputclick();"/>

当JQUERY ajax async仅在IE中设置为false时，Overlay不会显示

2 个答案: