Javascript 单击asp按钮时显示加载面板_Javascript_Jquery_Jquery Plugins_Dom Events

Javascript 单击asp按钮时显示加载面板

javascript jquery jquery-plugins

Javascript 单击asp按钮时显示加载面板,javascript,jquery,jquery-plugins,dom-events,Javascript,Jquery,Jquery Plugins,Dom Events,我有我的asp按钮，我在上面验证一些数据，然后启动它的服务器端功能。它工作正常。看起来像这样 <asp:Button CssClass="btnRequestFile" ID="btnSave" runat="server" Text="Request" OnClientClick="if(clientValidate() == false) return false;" OnClick="btnSave_Click" />

我有我的asp按钮，我在上面验证一些数据，然后启动它的服务器端功能。它工作正常。看起来像这样

<asp:Button CssClass="btnRequestFile" ID="btnSave" runat="server" Text="Request"
                            OnClientClick="if(clientValidate() == false) return false;" OnClick="btnSave_Click" />

我正在使用

jquery.load.min.js

来显示加载面板，它不工作。我也尝试在标记中放置一个div，并将其显示为隐藏加载，但没有任何关于如何执行的建议。

在“sonu”中放置一个俯冲，并给它一些id

并在jquery中编写

<script type="text/javascript">
    $(document).ready(function () {
$("#div1").hide();
function clientValidate() {

$("#div1").show("slow");
});
});
</script>


$（文档）.ready（函数（）{
$（“#div1”）.hide（）；
函数clientValidate（）{
$（#div1”）。显示（“慢”）；
});
});

将您的住宿gif放入潜水区


 <head>
        <script type="text/javascript">

        document.onload=hide_loading_div();

        function show_loading_div(){
          var my_loading_div = document.getElementById('the_loading_div');
          my_loading_div.style.visibility = 'visible';
        }

        function hide_loading_div(){
          var my_loading_div = document.getElementById('the_loading_div');
          my_loading_div.style.visibility = 'hidden';
        }
    </script>

    <style type="text/css">

        .class_of_the_loading_div{
            position:fixed;
            width:100%;
            height:100%;
            top:0;
            left:0;
            background-color: rgba(0,0,0,0.75);
            text-align:center;           
        }
    </style>


</head>

<body onload="hide_loading_div()">

   Some elements, grids, buttons etc..

   <asp:Button ID="btn_something" runat="server" Text="A Button" OnClientClick="show_loading_div()" OnClick="btn_something_Click" />

  <div class="class_of_the_loading_div">
    Write here LOADING or put a loading gif...
  </div>
</body>

document.onload=hide_loading_div（）；
函数show_loading_div（）{
var my_loading_div=document.getElementById（'the_loading_div'）；
my_loading_div.style.visibility='visible'；
}
函数hide_loading_div（）{
var my_loading_div=document.getElementById（'the_loading_div'）；
my_loading_div.style.visibility='hidden'；
}
.装载分区的类别{
位置：固定；
宽度：100%；
身高：100%；
排名：0；
左：0；
背景色：rgba（0,0,0,0.75）；
文本对齐：居中；
}
一些元素、网格、按钮等。。
在此处写入加载或放置加载gif。。。

说明：

加载面板在开始时可见（页面初始化时）

第一次初始化后，

document.onload=hide_loading_div（）代码隐藏面板


单击Asp按钮时，首先会触发JS代码，并再次显示面板。然后C#代码在后台运行并执行一些操作
回发完成后，html正文将隐藏面板，因为您编写了
你微笑，因为你快乐


注意：如果您只想使用类似loading div的面板来阻止页面的一部分，则容器div（将“变暗”）必须具有“位置：相对；”属性和拦截器div必须具有“位置：绝对”属性（不固定）
 <head>
        <script type="text/javascript">

        document.onload=hide_loading_div();

        function show_loading_div(){
          var my_loading_div = document.getElementById('the_loading_div');
          my_loading_div.style.visibility = 'visible';
        }

        function hide_loading_div(){
          var my_loading_div = document.getElementById('the_loading_div');
          my_loading_div.style.visibility = 'hidden';
        }
    </script>

    <style type="text/css">

        .class_of_the_loading_div{
            position:fixed;
            width:100%;
            height:100%;
            top:0;
            left:0;
            background-color: rgba(0,0,0,0.75);
            text-align:center;           
        }
    </style>


</head>

<body onload="hide_loading_div()">

   Some elements, grids, buttons etc..

   <asp:Button ID="btn_something" runat="server" Text="A Button" OnClientClick="show_loading_div()" OnClick="btn_something_Click" />

  <div class="class_of_the_loading_div">
    Write here LOADING or put a loading gif...
  </div>
</body>