Thursday, May 5, 2011

Can not put more than one ModalPopup control in one page?

To Show one popup Panel from multiple controls, use one ModalPopupExtender bound to an invisible 'dummy' control, then call ModalPopupExtender.Show() from the OnClick Event of each control you wish to show the popup.

This example is most related with control are added inside of the grid view and also add checkboxlist control inside of the ModelPopup.

CSS
.modalBackground {
FILTER: alpha(opacity=70); BACKGROUND-COLOR: #fff; opacity: 0.7px
}
.modalPopup {
BORDER-BOTTOM: #ccc 3px solid; BORDER-LEFT: #ccc 3px solid; PADDING-BOTTOM: 5px; BACKGROUND-COLOR: #fff; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; BORDER-TOP: #ccc 3px solid; BORDER-RIGHT: #ccc 3px solid; PADDING-TOP: 5px;
}



ASPX
 <asp:Button ID="btnFade" runat="server" Text="" visible="true" Width="0"/> 
 <asp:ModalPopupExtender 
BackgroundCssClass="modalBackground" 
DropShadow="true" 
CancelControlID="btnCancel" 
runat="server" 
PopupControlID="pnlModelPopup" 
id="ModalPopupExtender1" 
TargetControlID="btnFade">
</asp:ModalPopupExtender> 
<asp:Panel ID="pnlModelPopup" runat="server" CssClass="modalPopup" style="display:none;"> 
<table >
<tr>
<td>Add / Modify Competencies<br /><br /> </td>
</tr>
<tr>
<td>
<div style="height:200px; border-style:solid; border-width:thin; overflow: auto; width:100%;" runat="server">
<asp:CheckBoxList ID="chklstCompetencies" runat="server"  RepeatColumns="0" >
</asp:CheckBoxList>
</div>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnSave" runat="server" Text="Save" /> 
<asp:Button ID="btnCancel" runat="server" Text="Cancel" /> 
</td>
</tr>
</table>


</asp:Panel> 


In Codebehind any event if you want to fire for this ModelPopup then use this.
' show the modal popup
           popupLink_ModalPopupExtender.Show()


If you need to use Save button with some process in Code behind following property need to be deleted from the asp:ModalPopupExtender
OkControlID="btnOk"

0 comments:

Post a Comment