ASP.NET - Ajax control-modelpopup extender

use modalPopUpExtender like this-


<asp:Button ID="btnpopup" runat="server" Text="Button" />

<ajaxtoolkit:modalpopupextender id="mpe" runat="server" targetcontrolid="btnpopup"
popupcontrolid="pnlpopup" cancelcontrolid="btnCancelpopup" enableviewstate="true" />

<asp:Panel ID="pnlpopup" runat="server" style="display: none" >
test
<asp:Button ID="btnCancelpopup" runat="server" Text="Button" />
</asp:Panel>

Try this code and let me know.

Hello,

You can use javascript $find('modalpopupbehavior').hide() to close it.

Please check this: http://forums.asp.net/t/1424343.aspx 

You don't need care of how many okControl. If you want to close it, you can define OnClientClick event of button to call javascript $find('modalpopupbehavior').hide().

Hope this is helpful !

Thanks

The control above is initialized with this code. The display on the modal popup element is set to none to avoid a flicker on render. The italic properties are optional:

<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
    TargetControlID="LinkButton1"
    PopupControlID="Panel1"
    BackgroundCssClass="modalBackground" 
    DropShadow="true" 
    OkControlID="OkButton" 
    OnOkScript="onOk()"
    CancelControlID="CancelButton" 
    PopupDragHandleControlID="Panel3" >
        <Animations>
            <OnShowing> ..  </OnShowing>
            <OnShown>   ..  </OnShown>    
            <OnHiding>  ..  </OnHiding>            
            <OnHidden>  ..  </OnHidden>            
        </Animations>
    </ajaxToolkit:ModalPopupExtender>
    

• TargetControlID - The ID of the element that activates the modal popup
• PopupControlID - The ID of the element to display as a modal popup
• BackgroundCssClass - The CSS class to apply to the background when the modal popup is displayed
• DropShadow - True to automatically add a drop-shadow to the modal popup
• OkControlID - The ID of the element that dismisses the modal popup
• OnOkScript - Script to run when the modal popup is dismissed with the OkControlID
• CancelControlID - The ID of the element that cancels the modal popup
• OnCancelScript - Script to run when the modal popup is dismissed with the CancelControlID
• PopupDragHandleControlID - The ID of the embedded element that contains the popup header/title which will be used as a drag handle
• X - The X coordinate of the top/left corner of the modal popup (the popup will be centered horizontally if not specified)
• Y - The Y coordinate of the top/left corner of the modal popup (the popup will be centered vertically if not specified)
• RepositionMode - The setting that determines if the popup needs to be repositioned when the window is resized or scrolled.

1. You want to make sure that one and only one ScriptManager control is on the page.
   
   
2. To create a modal popup you have to insert the text you want to display in the modal popup in an Asp.Net Panel control.
   
   <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" style="display:none;">
   This is basic modal popup.
   <br /><br />
   <asp:Button ID="btnOk" runat="server" Text="Ok" />
   <asp:Button ID="btnClose" runat="server" Text="Close Me" />
   </asp:Panel>
   
   
3. Notice that I set display:none for the style of the Asp:Panel control. This prevents the Asp:Panel from being displayed for a brief second when the page is loading.
   
   
4. To display the modal popup you have to create an Asp.Net control that will display the modal popup when clicked.
   
   <asp:Button ID="Button1" runat="server" Text="First Modal Popup" />
   
   
5. Add the ModalPopupExtender control. Here is an example to what I set the attributes to.
   
   <ajaxToolkit:ModalPopupExtender
   BackgroundCssClass="modalBackground"
   DropShadow="true"
   OkControlID="btnOk"
   CancelControlID="btnClose"
   runat="server"
   PopupControlID="Panel1"
   id="ModalPopupExtender1"
   TargetControlID="Button1" />
   
   
6. Notice the BackgroundCssClass for the ModalPopupExtender. This class is used to give that grayed out overlay of the page while the modal popup is displayed.
   The style used for the ModalPopupExtender is below:
   
   .modalBackground {
   background-color:#fff;
   filter:alpha(opacity=70);
   opacity:0.7px;
   }
   
   
7. Then second modal popup runs Javascript when the close button is clicked. To achieve this you just need to add the OnCancelScript attribute. You can also use OnOkScript if you want the Javascript to run when the Ok button is clicked.
   The value you put for the attribute is the Javascript function you want to run. For example: OnCancelScript="CloseScript()"