I have a modal popup extender and a panel
inside of an update panel. I do have a Close button which I bind with the Cancel
ControlId. I however, would like to be able to click outside of my modal/panel
to close the panel. (instead of using the close button).
I tried a couple things and a plugin clickoutside. Nothing seems to help. Any
help or advice is much appreciated.
<asp:content
id="Content3"
contentplaceholderid="rightNavigation"
runat="server">
<asp:ScriptManager
ID="ScriptManager1"
runat="server"></asp:ScriptManager>
<div
id="mls_title"
class="MLS_Title">
<asp:Label
ID="lblTitle1"
Text="Tasks"
runat="server"
class="MLS_titleLbl"
/><br
/>
</div>
<asp:UpdatePanel
ID="pnlMap"
runat="server">
<ContentTemplate>
<div>
<asp:Button
ID="btnMap"
runat="server"
Text="MAP"
CausesValidation="false"
CssClass="btnMap"
/>
<ajax:ModalPopupExtender
ID="ModalPopupExtender1"
runat="server"
TargetControlID="btnMap"
PopupControlID="panel1"
PopupDragHandleControlID="PopupHeader"
Drag="true"
BackgroundCssClass="ModalPopupBG">
</ajax:ModalPopupExtender>
<asp:Panel
ID="panel1"
runat="server">
<div
class="popup_large">
<asp:Label
ID="Label7"
Text="Floor Plan"
runat="server"
stle="float:left"></asp:Label>
<asp:ImageButton
ID="ImageButton1"
runat="server"
ToolTip="No"
ImageUrl="~/Images/no.png"
Style="float:
right; margin-right:
20px" />
<br
/>
<asp:ImageButton
ID="img"
runat="server"
Height="30em"
Width="45em"
/>
</div>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
C#
<AjaxToolKit:ModalPopupExtender
.... BackgroundCssClass="jsMpeBackground" />
JavaScript (using
jQuery)
jQuery('.jsMpeBackground').click(function () {
var
id = jQuery(this).attr('id').replace('_backgroundElement',
'');
$find(id).hide();
});
Here is a link to an example that adds to the background onclick to close the
modal:
http://forums.asp.net/t/1528820.aspx
Copied the key bits here for reference:
function pageLoad() {
var
mpe = $find("MPE");
mpe.add_shown(onShown);
}
function onShown() {
var
background = $find("MPE")._backgroundElement;
background.onclick =
function() { $find("MPE").hide(); }
}
<AjaxToolKit:ModalPopupExtender
ID="mdlPopup" BehaviorID="MPE"
runat="server"
TargetControlID="btnShowPopup"
PopupControlID="pnlPopup"
CancelControlID="btnClose"
BackgroundCssClass="modalBackground" />
Use ModalPopupExtender without having to set TargetControlID?
The TargetControlID of 'ModalPopupExtender1' is not valid. The value cannot be
null or empty. Description: An unhandled exception occurred during the execution
of the current web request. Please review the stack trace for more information
about the error and where it originated in the code.
Exception Details: System.InvalidOperationException: The TargetControlID of
'ModalPopupExtender1' is not valid. The value cannot be null or empty.