Thursday, July 16, 2009

Masking ajax ModalPopupExtender

Step 1:
Create stylesheet to cover the whole window

style type="text/css"
.modalBackground
{
background-color: black;
opacity: 0.5;
z-index: 1000;
filter: alpha(opacity=50);
}
.processMessage
{
position: fixed;
top: 30%;
left: 43%;
padding: 10px;
width: 14%;
background-color: #fff;
border: solid 1px #000;
}
style

Step 2:
Add your ModalPopupExtender control on page

ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" PopupControlID="pnllinkDoctorName"
Drag="false" TargetControlID="lnkbtnConnectedto" CancelControlID="imgbtnCloseWindow"
DropShadow="false" BackgroundCssClass="modalBackground" runat="server">
/ajaxToolkit:ModalPopupExtende

Step 3:
Add your control which will be shown in popup

asp:Panel ID="pnllinkDoctorName" runat="server" CssClass="processMessage" Width="535px"
Style="display: none; background-"

div
Put what you want to show in popup
/div
/asp:panel


No comments: