Question

我有一个带有一些图像按钮的gridview，每个图像按钮都会启动该项目的报告页面。该报告需要10-15秒才能运行，所以我想要一个弹出“生成报告，请等待”类型的东西。我可以想到一些方法，但希望那些比我更有经验的人的意见。我正在考虑的选项：

a）将我的图像按钮链接到一个“请稍候”的中间页面，然后从那里将其引用到报告页面。看起来有点笨重 b）使用jquery或类似的调查。我有telerik控件，他们有一些东西，但不清楚是否适合。 c）定义某种类型的CSS层，并在其上发出请等待警告，并将其作为按钮的onclick事件的一部分显示 d）查看jquery或类似的

有什么想法吗？

谢谢！

Answer 1

我使用Div透明，非常酷而简单。试一试。

 <div id="ModalPopup" style="visibility: hidden;">
  <div style="position: fixed; width: 100%; height: 100%; z-index: 10002; background-color: Gray;
    filter: alpha(opacity=70); opacity: 0.7;">
    &nbsp;
  </div>
  <table style="position: fixed; width: 100%; height: 100%; z-index: 10003;">
    <tr>
      <td align="center" valign="middle">
        <div style="color: Black; font-weight: bolder; background-color: White; padding: 15px;
          width: 200px;">
          <asp:Image ID="Image3" runat="server" ImageUrl="~/Images/progress.gif" />
          Procesando....
        </div>
      </td>
    </tr>
  </table>
  </div>

要显示div，请使用此JavaScript：

document.getElementById（'ModalPopup'）。style.visibility ='visible';

Answer 2

之前我遇到了完全相同的问题，但我发现AJAX Server Control UpdateProgress非常有用。这是UpdateProgress控件的链接。

Answer 3

您可以在页面上显示<iframe>，其style设置为display:none。一个按钮（您将用于执行操作）将执行一个javascript函数，该函数会在点击时将<iframe>的样式设置为display:block。

Answer 4

请等待js中的页面加载，可以在任何语言中尝试使用

在体内放置此代码

  <body>
    <div id='loadingmsg' style='display: none;'></div>
    <div id='loadingover' style='display: none;'></div>
  </body>

在CSS中

          #loadingmsg {
    width:100%;
height:100%;
position:fixed;
z-index:9999;
background:url("assets/img/loaders/load10.gif") no-repeat center center rgba(255,255,255,0);
      }
      #loadingover {
      background: #23351f;
      z-index: 99;
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
      filter: alpha(opacity=80);
      -moz-opacity: 0.8;
      -khtml-opacity: 0.8;
      opacity: 0.8;
    }

js

   <script>
       document.onreadystatechange = function () {
           var state = document.readyState
           if (state == 'interactive') {
               showLoading();
           }
           else if (state == 'complete') {
              
                   hideLoading();
              
           }
       }

      
        function showLoading() {
            document.getElementById('loadingmsg').style.display = 'block';
            document.getElementById('loadingover').style.display = 'block';
        }
        function hideLoading() {
            document.getElementById('loadingmsg').style.display = 'none';
            document.getElementById('loadingover').style.display = 'none';
        }
    </script>

在C＃ASP.NET中的页面之间“请等待”屏幕。最佳实践？

4 个答案: