Question

我的面板原来是隐藏的。我想在单击

 <asp:Button ID="btnSubmit" runat="server" Text="Submit"  Width="167px" 
             data-icon="check" OnClick="btnSubmit_Click" 
             OnClientClick="showProgress();"     />

我的面板代码如下：

 <asp:Panel ID="pnlPopup" runat="server" CssClass="updateProgress" Visible="false">
        <div id="imageDiv">
            <div style="float: left; margin: 9px">
                <img src="Images/loader.gif" id="img1" width="32px"
                     height="32px" style="display:none"/>
            </div>
            <div style="padding-top: 17.5px; font-family: Arial,Helvetica,sans-serif; font-size: 12px;">
                Loading. Please wait...
            </div>
        </div>
    </asp:Panel>

单击按钮时，我有一个名为showProgress（）的javascript函数，如下所示：

function showProgress() {
      

            if (Page_IsValid) {
                // panel visible code here
            }

        }

Answer 1

不要在面板上使用Visible =“ false”，而应使用CSS类。该visible =“ false”将不会在生成的html中呈现div。

<asp:Panel ID="pnlPopup" runat="server" CssClass="updateProgress hidden">
...
</asp:Panel>

function showProgress() {          
    if (Page_IsValid) {
      $("div[name$='pnlPopup']").removeClass("hidden");              
    }
    return false; //To prevent triggering of postback
}

Answer 2

您需要添加此jquery代码并检查其工作正常

此外，请在正常工作后添加正确的按钮ID和面板ID

<script type="text/javascript">
            $(function() {
                $("#btnSubmit").click(function(evt) {
                    evt.preventDefault();
                    $('#pnlPopup').toggle('fast');
                });
            });
    </script>

单击asp：按钮显示和隐藏面板

2 个答案: