title: how to close ajax modal popup with clicking outside
body: <p>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:</p>
  
  <ul>
  <li>Close the popup when user clicks outside the modal popup</li>
  <li>Trigger a serverside code after modal popup is closed. </li>
  </ul>
  
  <p>There are similar questions on stackoverflow but almost all of them are related to jquery modal popups.</p>
  
  <p>here is my code:</p>
  
  <pre><code>&lt;asp:Button ID="Button1" runat="server" Style="display: none" /&gt;
      &lt;asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" OkControlID="btnOkay"
          TargetControlID="Button1" PopupControlID="Panel1" PopupDragHandleControlID="PopupHeader"
          Drag="true" BackgroundCssClass="ModalPopupBG"&gt;
      &lt;/asp:ModalPopupExtender&gt;
      &lt;asp:Panel ID="Panel1" runat="server" CssClass="PopupCss"&gt;
          &lt;asp:UpdatePanel ID="UpdatePanel1" runat="server"&gt;
              &lt;ContentTemplate&gt;
                  &lt;table style="width: 100%; height: 825px;"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;div id="mediaplayer"&gt;
                                  JW Player goes here&lt;/div&gt;
                              &lt;script type="text/javascript"&gt;
                                  jwplayer("mediaplayer").setup({
                                      flashplayer: "jwplayer/player.swf",
                                      file: "&lt;%=videoName %&gt;",
                                      image: "&lt;%=videoThumb %&gt;",
                                      width: "100%",
                                      height: "100%"
                                  });
                              &lt;/script&gt;
                          &lt;/td&gt;
                          &lt;td valign="top" align="left" style="text-align: left;"&gt;
                              &lt;div class="fb-like" data-send="true" data-layout="button_count" data-show-faces="true"&gt;
                              &lt;/div&gt;
                              &lt;br /&gt;
                              &lt;div class="fb-comments" data-href="&lt;%=videoLink%&gt;" data-num-posts="3" data-width="470"&gt;
                              &lt;/div&gt;
                              &lt;br /&gt;
                              &lt;br /&gt;
                              &lt;br /&gt;
                              &lt;!-- AddThis Button BEGIN --&gt;
                              &lt;div class="addthis_toolbox addthis_default_style "&gt;
                                  &lt;a class="addthis_button_preferred_1"&gt;&lt;/a&gt;&lt;a class="addthis_button_preferred_2"&gt;
                                  &lt;/a&gt;&lt;a class="addthis_button_preferred_3"&gt;&lt;/a&gt;&lt;a class="addthis_button_preferred_4"&gt;
                                  &lt;/a&gt;&lt;a class="addthis_button_compact"&gt;&lt;/a&gt;&lt;a class="addthis_counter addthis_bubble_style"&gt;
                                  &lt;/a&gt;
                              &lt;/div&gt;
                              &lt;script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f61d99d08697325"&gt;&lt;/script&gt;
                              &lt;!-- AddThis Button END --&gt;
                              &lt;br /&gt;
                              &lt;br /&gt;
                              &lt;asp:Rating ID="Rating1" runat="server" MaxRating="5" StarCssClass="ratingStar" FilledStarCssClass="ratingStarFilled"
                                  AutoPostBack="false" OnChanged="VideoRatingChanged" EmptyStarCssClass="ratingStarEmpty"
                                  WaitingStarCssClass="ratingStarEmpty"&gt;
                                  &lt;asp:HiddenField ID="HiddenField1" runat="server" Value='&lt;%=videoId%&gt;' /&gt;
                              &lt;/asp:Rating&gt;
                              &amp;nbsp (&lt;%=voteCount%&gt;)
                              &lt;br /&gt;
                              Minder Score:
                              &lt;%=minderScore %&gt;
                              &lt;br /&gt;
                              &lt;div class="Controls" style="text-align: left;"&gt;
                                  &lt;input id="btnOkay" type="button" value="Kapat" /&gt;
                              &lt;/div&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/ContentTemplate&gt;
          &lt;/asp:UpdatePanel&gt;
      &lt;/asp:Panel&gt;
  </code></pre>
  
  <p>and in the code behind i show the popup with this line:</p>
  
  <pre><code>ModalPopupExtender1.Show();
  </code></pre>
  
  <p>Any help would be appreciated.
  Thanks in advanced.</p>