asp ModalPopupExtender is getting closed when page is getting postback

Question 1

I used AsyncPostBackTrigger to run the server side code and changed the __DoPostBack method parameters. now my treeview design is

<div id="form" runat="server">
<asp:UpdatePanel ID="updTree" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:TreeView ID="tvFolderSelect" runat="server" RootNodeStyle-ForeColor="Black"
            CssClass="foldertree" LeafNodeStyle-ForeColor="Black" LeafNodeStyle-Font-Bold="false"
            ParentNodeStyle-ForeColor="Black" Width="100%" Style="margin: 3px 0 0 -16px;"
            OnTreeNodePopulate="tvFolderSelect_TreeNodePopulate" OnTreeNodeCheckChanged="tvFolderSelect_TreeNodeCheckChanged"
            ShowCheckBoxes="All" onclick="postbackOnCheck(event);">
            <LeafNodeStyle Font-Bold="False" ForeColor="Black" CssClass="foldertreeleafnode"
                ImageUrl="~/images/img_dms/sm_fldr.png" />
            <ParentNodeStyle Font-Italic="True" ImageUrl="~/images/img_dms/sm_fldr.png" Font-Underline="True"
                CssClass="foldertreeparentnode" />
            <NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black" HorizontalPadding="0px"
                NodeSpacing="0px" VerticalPadding="0px" />
            <RootNodeStyle ForeColor="Black" CssClass="foldertreerootnode" />
            <SelectedNodeStyle Font-Underline="False" HorizontalPadding="0px" VerticalPadding="0px" />
        </asp:TreeView>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="tvFolderSelect" EventName="TreeNodeCheckChanged" />
    </Triggers>
</asp:UpdatePanel>

and the function to postback is

  function postbackOnCheck(e) {
    var evt = e || window.event;
    var o = evt.target || evt.srcElement;
    if (o.tagName == 'INPUT' && o.type == 'checkbox' && o.name != null && o.name.indexOf('CheckBox') > -1) {
        __doPostBack('<%=updTree.ClientID %>', 'Refresh:0,1,2');
    }
}

Now my panel is not closing while getting postback

Question 2

here is what I did to re-create your issue. I've created a web page with a modal popup extender.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalPopExample.aspx.cs" Inherits="WebApp.ModalPopup.ModalPopExample" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test Page</title>
    <style type="text/css">
        .hide
        {
            display:block;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
        <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        <asp:Panel ID="Panel1" CssClass="hide" runat="server" BorderColor="Red" BorderStyle="Dashed" BorderWidth="3px">
            Are you sure?
            <br />
            <asp:Button ID="btnok" runat="server" Text="OK" />
            <asp:Button ID="btncancel" runat="server" Text="Cancel" />
        </asp:Panel>
        <asp:Button ID="btnShow" runat="server" Text="Show Modal" />
        <asp:Image ID="Image1" ImageUrl="~/image_loader.ashx" runat="server" />
        <ajaxToolkit:ModalPopupExtender ID="btnShow_ModalPopupExtender" DropShadow="true" OkControlID="btnok" CancelControlID="btncancel" PopupControlID="Panel1" runat="server" DynamicServicePath="" Enabled="True" TargetControlID="btnShow">
        </ajaxToolkit:ModalPopupExtender>        
    </form>
    <script>
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_pageLoaded(function () {
            console.log('loaded');
        });
    </script>
</body>
</html>

Notice that the image is loaded via a handler file (ashx):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Web;

namespace WebApp.ModalPopup
{
    /// <summary>
    /// Summary description for image_loader
    /// </summary>
    public class image_loader : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "image/jpg";
            var imagePath = context.Server.MapPath("~/images/windows_xp_bliss-wide.jpg");
            Thread.Sleep(20000);
            context.Response.TransmitFile(imagePath);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

The popup flickers for a while. The most simple workaround you can do is hide the element at first itself (via css) and some javascript is required to remove that css when the web page if fully loaded.

    <style type="text/css">
        .hide
        {
            display:none;
        }
    </style>

When you ajax client scripts all finish loading...find the control and remove the above class on the element.

<script>
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_pageLoaded(function () {
        console.log('loaded');
        var div = document.getElementById('Panel1');
        div.className = '';
    });
</script>

Hope this helps.

Question 3

Try to use update panel and refer below link for detail why Modalpopup close on postback?

http://patelshailesh.com/index.php/why-does-modalpopup-close-on-postback

Question 4

You can use this JavaScript function on button click:

<script>
                $("#btn").click(
                   function () {
                       window.top.location = "WebForm1.aspx";
                   });
</script>

I had used this function to auto update a grid on closing the Popup, if you want to see that Article and want to see how I had used this function then you can refer to this link:

http://www.c-sharpcorner.com/UploadFile/cd7c2e/how-to-auto-refresh-grid-view-on-closing-of-popup-menu/

Many other Articles and similar forums can be found on http://www.c-sharpcorner.com/