locked
Need hlep with Modal Popup extender, and also Modal Popup using JQuery RRS feed

  • Question

  • User2107475791 posted

    hello,

    I am using the ajaxtoolkit modal popup extender to display to display popup, and also a custom modal popup to display a loading progress modal while running a long running task. here is the code I am using below, the problem I am having is when I try to open a modal popup using an extender it also loads the progress modal in the back ground which is not what I want, also when I clock the main model it leave the loading modal popup open that was opened in the back ground. I need both how can I get both to co-exist?

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PatientForm.aspx.cs" Inherits="AwareDocEduWeb.Tabs.PatientForm" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    <%@ Register Src="~/UserControls/ucYesNoCancel.ascx" TagPrefix="uc1" TagName="YesNoCancel" %>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    
    <html>
    
    <head>
    	<title> </title>
    	
    	<script type="CSharp" runat="server">
    		
    		private bool _ModalYesNoCancelShown = false;
    		
    		protected void Page_Load(object sender, EventArgs e)
    		{
    			if (!Page.IsPostBack)
    			{
    			}
    			else
    			{
    				if (ViewState["ShowModelYesNoCancel"] != null)
    				{
    					if ((bool)ViewState["ShowModelYesNoCancel"] == true)
    					{
    						this.ShowModalYesNoCancel();
    					}
    				}
    			}
    		}
    		
    		protected void btnYesNoCancelOk_Click(object sender, EventArgs e)
    		{
    			// run any task here if u choose not necessary to repeat the bug.
    			this.HideModalYesNoCancel();
    		}
    		
    		void ShowModalYesNoCancel()
            {
                if (_ModalYesNoCancelShown)
                    return;
    
                this.ModalYesNoCancel.Show();
                ViewState["ShowModelYesNoCancel"] = true;
    
                _ModalYesNoCancelShown = true;
            }
    
            void HideModalYesNoCancel()
            {
                this.ModalYesNoCancel.Hide();
                ViewState["ShowModelYesNoCancel"] = null;
            }
    		
    	<script>
    	
    </head>
    <body>
    <form id="form1">
    
    <script type="text/javascript">
    
    	Sys.Application.add_init(appl_init);
    
    	// Use this to display progress loading modal when running long running tasks.
    	function appl_init() {
    		var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
    		pgRegMgr.add_beginRequest(BeginHandler);
    		pgRegMgr.add_endRequest(EndHandler);                
    	}
    
    	function BeginHandler() {
    		beforeAsyncPostBack();
    	}
    
    	function EndHandler() {
    		afterAsyncPostBack();
    	}
    
    	function beforeAsyncPostBack() {		
    		ShowProgress();
    	}
    
    	function afterAsyncPostBack() {
    		EnsureHideProgress();
    	}
    	
    	function ShowProgress() {
    	
    		setTimeout(function () {
    			var modal = $('<div />');
    			modal.attr('id', 'divModalMask');
    			modal.attr('style', 'display:block;');
    			modal.addClass("modal");
    			$('body').append(modal);
    			var loading = $(".loading");
    			loading.show();
    			var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
    			var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
    			loading.css({ top: top, left: left });
    		}, 200);
    	}
    	function EnsureHideProgress() {
    		var modal = $("#divModalMask");		
    		modal.remove();
    
    		var popup = $('#divPopup');
    		popup.attr('style', 'display:none;');
    	}
    
    </script>
    
    <div id="divPopup" class="loading" align="center">
    	Loading. Please wait.<br />
    	<br />
    	<img src="../images/loading_black.gif" alt="" />
    </div>
    
     <div>
     
    	<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">
    	</asp:ScriptManager>
    	
    	<asp:UpdatePanel ID="Update1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
    		<Triggers>			
    		</Triggers>
    		<ContentTemplate>
    			
    			<ajaxToolkit:ModalPopupExtender ID="ModalYesNoCancel" runat="server" TargetControlID="btnYesNoCancelOk" PopupControlID="PanelYesNoCancel" OkControlID="btnYesNoCancelCancel" DropShadow="True"></ajaxToolkit:ModalPopupExtender>
    			
    			<asp:Panel ID="PanelYesNoCancel" runat="server" align="center" Style="display: none; border-style: solid; border-width: 2px; border-color: black;" BackColor="White" Height="250" Width="515">
    
    				<!-- Create User control which will be display within this popup is shown, add a button which runs a long running task and u will see what i mean. -->
    				<div style="text-align: left; height: 400px; width: 510px; margin-top: 10px;">
    					<uc1:YesNoCancel runat="server" ID="ucYesNoCancel1" />
    				</div>
    
    				<div style="text-align: center">
    					<asp:Button ID="btnYesNoCancelOk" runat="server" Text="Ok" Visible="true" BackColor="Transparent" ForeColor="Transparent" BorderColor="Transparent" BorderStyle="None" Enabled="false" OnClick="btnYesNoCancelOk_Click" />
    					<asp:Button ID="btnYesNoCancelCancel" runat="server" Text="Cancel" Visible="true" BackColor="Transparent" ForeColor="Transparent" BorderColor="Transparent" BorderStyle="None" Enabled="false" />
    				</div>
    
    			</asp:Panel>
    						
    		</ContentTemplate>
    		
    	</asp:UpdatePanel>
    	
    </div>
    
    </form>
    </body>
    </html>

     

    Friday, December 16, 2016 4:23 PM

All replies

  • User-1838255255 posted

    Hi awaredoc,

    According to your code, I can't reproduce your scene, but I understand your problem in general. Open AjaxPopup and jQuery popup in page_init event, you want is when jQuery popup close, AjaxPopup closed and close AjaxPopup, jQuery Popup also can be closed!  

    function ShowProgress() { setTimeout(function () { var modal = $('<div />'); modal.attr('id', 'divModalMask'); modal.attr('style', 'display:block;'); modal.addClass("modal"); $('body').append(modal); var loading = $(".loading"); loading.show(); var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0); var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0); loading.css({ top: top, left: left }); }, 200); }

    I notice this function, you need set one signal to close this Popup, like when width to 100% or time to fixed value, in this way, jQuery popup could been closed!

    So I suggest you can upload your demo to OneDrive(Including your test material). I can download it and debugging. This will help you quickly analyze the problem.

    Share OneDrive files and folders:

    https://support.office.com/en-us/article/Share-OneDrive-files-and-folders-9fcc2f7d-de0c-4cec-93b0-a82024800c07 

    Best Regards,

    Eric Du

    Monday, December 19, 2016 9:30 AM