Question

How can I disable the animation effect while the ModalPopupExtender is shown? Here is my coding:

HTML

 <script language ="javascript" type="text/javascript">
    function pageLoad() {
        var mpe = $find("modalPopUp");
        //add shown will be fire when when the ModalPopupExtender had shown 
        mpe.add_shown(onShown);

    }
    function onShown() {
        var background = $find("modalPopUp")._backgroundElement;
        background.onclick = function () { $find("modalPopUp").hide(); }
    }
 </script>

<asp:UpdatePanel ID ="updatePanel" runat="server">
    <ContentTemplate>
<asp:Panel ID="Panel1" runat="server" BackColor="Azure">
   <asp:UpdatePanel ID="updatePanel2" runat="server"  UpdateMode="Conditional">
   <ContentTemplate>


    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    <asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Button" />
    <br />
    <br />
    <br />
    <br />
    <br />

   </ContentTemplate>
   </asp:UpdatePanel>

</asp:Panel>


     <!--Register modal pop up-->
    <asp:ModalPopupExtender ID="modalPopUp" runat="server" 
    TargetControlID="Button1" PopupControlID="Panel1" 
    BackgroundCssClass="overlay_style" BehaviorID="modalPopUp"  >
       <Animations>
        <OnShown>
          <FadeIn duration="0.5" Fps="100" />
        </OnShown>
    </Animations>
        </asp:ModalPopupExtender>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
    </asp:UpdatePanel>

My back end code:

 protected void Button2_Click(object sender, EventArgs e)
 {
     this.modalPopUp.Show();
 }

How can I disable the animation while I click the button2 to advoid the effect repeated?

Answer 1

You can access the animation properties from the server side. So you could set the OnShown property to null so that it doesn’t repeat (possibly saving the animation in a variable if you need to restore it again). Something like this:

protected void Button2_Click(object sender, EventArgs e)
{
    // Store the current "OnShown" animation for possible later use
    AjaxControlToolkit.Animation onShownAnim = modalPopup.OnShown;
    // Set the "OnShown" animation propert to null to disable the animation
    modalPopup.OnShown = null;

    modalPopup.Show(); // Now your popup shows without any animation, hooray!
}

Note regarding onShownAnim – You will definitely want to use something more persistent than a local variable to save the current OnShown property if you need to restore it, but I think you get the idea =)