Remove From My Forums

Need hlep with Modal Popup extender, and also Modal Popup using JQuery

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

0

Sign in to vote

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

Asked by:

Need hlep with Modal Popup extender, and also Modal Popup using JQuery

Question

All replies