如何通过单击外部关闭 Ajax 模式弹出窗口
本文关键字:模式 窗口 Ajax 何通过 单击 外部 | 更新日期: 2023-09-27 18:37:12
我正在用 c# asp.net 编写一个网页。页面正在使用母版页 。我在页面中有一个 ajax 模式弹出窗口。我想为此弹出窗口添加 2 个功能:
- 当用户在模式弹出窗口外单击时关闭弹出窗口
- 在模式弹出窗口关闭后触发服务器端代码。
在stackoverflow上也有类似的问题,但几乎所有问题都与jquery模态弹出窗口有关。
这是我的代码:
<asp:Button ID="Button1" runat="server" Style="display: none" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" OkControlID="btnOkay"
TargetControlID="Button1" PopupControlID="Panel1" PopupDragHandleControlID="PopupHeader"
Drag="true" BackgroundCssClass="ModalPopupBG">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="PopupCss">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table style="width: 100%; height: 825px;">
<tr>
<td>
<div id="mediaplayer">
JW Player goes here</div>
<script type="text/javascript">
jwplayer("mediaplayer").setup({
flashplayer: "jwplayer/player.swf",
file: "<%=videoName %>",
image: "<%=videoThumb %>",
width: "100%",
height: "100%"
});
</script>
</td>
<td valign="top" align="left" style="text-align: left;">
<div class="fb-like" data-send="true" data-layout="button_count" data-show-faces="true">
</div>
<br />
<div class="fb-comments" data-href="<%=videoLink%>" data-num-posts="3" data-width="470">
</div>
<br />
<br />
<br />
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2">
</a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4">
</a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style">
</a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f61d99d08697325"></script>
<!-- AddThis Button END -->
<br />
<br />
<asp:Rating ID="Rating1" runat="server" MaxRating="5" StarCssClass="ratingStar" FilledStarCssClass="ratingStarFilled"
AutoPostBack="false" OnChanged="VideoRatingChanged" EmptyStarCssClass="ratingStarEmpty"
WaitingStarCssClass="ratingStarEmpty">
<asp:HiddenField ID="HiddenField1" runat="server" Value='<%=videoId%>' />
</asp:Rating>
  (<%=voteCount%>)
<br />
Minder Score:
<%=minderScore %>
<br />
<div class="Controls" style="text-align: left;">
<input id="btnOkay" type="button" value="Kapat" />
</div>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
在后面的代码中,我显示了带有以下行的弹出窗口:
ModalPopupExtender1.Show();
任何帮助将不胜感激。提前谢谢。
要使用JavaScript隐藏/显示modalpopuextender,请尝试:
function hidemodal() {
$find('ModalPopupExtender1').hide();
}
function showmodal() {
$find('ModalPopupExtender1').show();
}
您可以在单击事件上提出该 hidemodal() 方法,否则。
您也可以在hidemodal()方法中添加代码,使用PageMethods从javascript调用服务器端脚本来触发服务器端函数。在网上查找有关 asp.net 页面方法
function hidemodal() {
$find('ModalPopupExtender1').hide();
PageMethods.AnyServerFunction(param, onsuccess_callback);
}
function onsuccess_callback() {
}
问候
你可以在 body 上绑定 click
事件,并在点击内部设置e.stopPropagation();
,之后你可以检查点击的元素是否是弹出元素,如果是,则不执行任何操作,如果不是,则关闭弹出窗口