Syntax:

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server">
</cc1:ModalPopupExtender>

ModalPopup Properties:

TargetControlID - The ID of the element that activates the modal popup

PopupControlID - The ID of the element to display as a modal popup

OkControlID - The ID of the element that dismisses the modal popup

Code:

 <%-- ScriptManager control
manages client script for AJAX enabled ASP.NET pages--%>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<%--Use Modalpopup Extender
here--%>
 
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" OkControlID="OkButton"TargetControlID="LinkButton1" BackgroundCssClass="Background" PopupControlID="Panel1">
</cc1:ModalPopupExtender>
 
<asp:Panel ID="Panel1" runat="server" CssClass="Popup" Style="display: none" Width="668px">
<%--Add the table here --%>
</asp:Panel>
<asp:LinkButton ID="LinkButton1" runat="server">Show Job Id</asp:LinkButton>

Here StyleSheet is used to change the style of body and popup window.In Panel1

css class is usedCssClass="mPopup".

Add StyleSheet

body, div, p, h1, h2, h3, h4, ul, li, table
{
      margin:0;padding:0;border:none;
}
 
.Background {
      background-color:Lime ;
}
 
.Popup {
      background-color:Gray;border-width:3px;
      border-style:double;border-color:Gray;
      padding:4px;width:260px;
}
 

Description

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" OkControlID="OkButton"
TargetControlID="LinkButton1" BackgroundCssClass="Background" PopupControlID="Panel1">
</cc1:ModalPopupExtender>

Here TargetControlID is LinkButton1 when you click on this LinkButton then popup

window will open. PopupControlID is Panel1 when you click LinkButton then this

panel will open as popup window.OkControlID is OkButton when you click

this button then popup window will closed.

Run the project

When you click on LinkButton Show Job Id then a popup window will open

When you click ok then popup will close.