AjaxToolkit遮罩层实现

显示全部楼层 · 2014-7-12 09:00:28

AjaxToolkit是ASP.NET中第三方AJAX控件，功能很强大，绝无刷新。

今天分享AjaxToolkit的控件ModalPopupExtender，实现遮罩层。

代码：

[C#] 纯文本查看 复制代码

   <!-- 弹出窗口 -->
                  <style>
                .modalBackground {
                    background-color:Gray;
                    filter:alpha(opacity=70);
                    opacity:0.7;
            }
            </style>
          <ajax:ModalPopupExtender ID="mpeShow" PopupControlID ="pnlShow" TargetControlID="btntemp" BackgroundCssClass="modalBackground" runat="server"></ajax:ModalPopupExtender>
          <asp:Button ID="btntemp" runat="server" Text="btntemp" style="display:none;" />
                <asp:Panel  ID="pnlShow" runat="server" style=" display:none; width:350px; background-color: White; border-width: 1px; border-color: Black; border-style: solid; padding: 20px;">
                    <div class="netbank-head" style="display:none"> <span class="lt">支付</span> <asp:LinkButton ID="btnCanel" class="close rt" runat="server"></asp:LinkButton> </div>
                    <span style="font-weight:bold; font-size:15px;"> 请在新打开的银行页面完成支付，支付成功即完成充值。</span><br /> 
                    <a href="#">充值遇到问题</a>
                      <div class="mt15 mb15"> <span class="btn">
                         <asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="~/PersonalMember/TransactionInfo/BargainInfo.aspx">支付成功</asp:LinkButton>
                     </span> </div>
                      </asp:Panel>
            
             
           <!-- 弹出窗口结束 -->

ASP.NET后台直接控件名.Show() 就行了： mpeShow.Show();
这比JQuery遮罩层好用多了。