how to close ajax modal popup with clicking outside

Question

I am writing a web page in c# asp.net . The page is using a master page . I have an ajax modal popup window in the page. I want to add 2 features for this popup:

Close the popup when user clicks outside the modal popup
Trigger a serverside code after modal popup is closed.

There are similar questions on stackoverflow but almost all of them are related to jquery modal popups.

here is my code:

<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>
                            &nbsp (<%=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>

and in the code behind i show the popup with this line:

ModalPopupExtender1.Show();

Any help would be appreciated. Thanks in advanced.

@Jupaol I added the code. The panel has a video with social plugin, a rating control and facebook comment plugin. Thanks. — Ozgur Dogus, Jun 14 '12 at 08:02

score 0 · Answer 1 · answered Jun 14 '12 at 08:36

0

to hide / show modalpopuextender using javascript, pls try:

function hidemodal() {
$find('ModalPopupExtender1').hide();
}

function showmodal() {
$find('ModalPopupExtender1').show();
}

you can raise that hidemodal() method on click event or else.

Also you can add code inside hidemodal() method with calling a server side script from javascript using PageMethods to triggers server side function. Find on net about asp.net PageMethods

function hidemodal() {
$find('ModalPopupExtender1').hide();
PageMethods.AnyServerFunction(param, onsuccess_callback);
}

function onsuccess_callback() {
}

Regards,

answered Jun 14 '12 at 08:36

Agung Gugiaji

121
3

hi, how can i bind the clicking outside of the modal to the hidemodal function and where do i call that function ? Thanks. – Ozgur Dogus Jun 14 '12 at 08:39
1

I think it is hard to click outside of modal because the nature of modalpopup is preventing parent to be accessed before modal is closed. One way i can think of is catching ESC key at body / form keydown event i.e with javascript: function hidemodal() { var keycode = window.event.keyCode; if (keycode == 27) { $find("ModalPopupExtender1").hide(); } } – Agung Gugiaji Jun 14 '12 at 10:58

score 0 · Answer 2 · answered Jun 14 '12 at 09:37

0

You can bind the click event on the body, and set e.stopPropagation(); inside the click, after that you can check if the clicked element is the popup element, if it is, do nothing, if it's not, close the popup

answered Jun 14 '12 at 09:37

udidu

8,269
6
48
68

how to close ajax modal popup with clicking outside

2 Answers2