Question

我有一个包含按钮的网页。单击该按钮时，它将在该过程后面的代码中调用一些代码。我想显示一条“处理中”消息和一个使其模态化的消息，以便用户在执行其他任何操作之前必须等待处理完成。单击按钮时，我使用JavaScript函数显示“处理中”消息和模态。处理完成后，消息消失，但模式仍然存在。

这是我的代码：

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script language="javascript" type="text/javascript">
		function ShowProgress2() {
			    setTimeout(function () {
				var modal = $('<div />');
				modal.addClass("modal2");
				$('body').append(modal);
				var loading2 = $(".loading2");
				loading2.show();
				var top = Math.max($(window).height() / 2 - loading2[0].offsetHeight / 2, 0);
				var left = Math.max($(window).width() / 2 - loading2[0].offsetWidth / 2, 0);
				loading2.css({ top: top, left: left });
				}, 200);  
			//$('modal2').modal('hide'); //this does not hide the modal when processing is done
			//document.getElementById('modal2').style.display = 'none'; //this does not hide the modal when processing is done
		}
	</script>

.modal2
		{
			position: fixed;
			top: 0;
			left: 0;
			background-color: black;
			z-index: 99;
			opacity: 0.8;
			filter: alpha(opacity=80);
			-moz-opacity: 0.8;
			min-height: 100%;
			width: 100%;
		}
		.loading2
		{
			font-family: Arial;
			font-size: 10pt;
			border: 5px solid #67CFF5;
			width: 200px;
			height: 100px;
			display: none;
			position: fixed;
			background-color: White;
			z-index: 999;
		}

	<asp:Button runat="server" ID="MedicaidDataGenerateBillingFile_Generate" Text="Generate" width="100px" OnClientClick="ShowProgress2();"/>

	<div class="loading2" align="center" style="display:none;">
		<div style="margin: auto; text-align: center; position: absolute; top: 0px; left: 0px; z-index: 9998; width: 100%; height: 100%; background-color: #fff; filter: alpha(opacity=70); opacity: 0.7;">
			<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/activity/roller.gif" /><br />
				Generating Billing File...
		</div>
	</div>

单击按钮的模态时按原样运行它，并且在模态中间显示处理消息。处理完成后，处理消息消失，但模态保持可见。我已经尝试了我注释掉的javascript函数末尾列出的几件事，但它们都无法隐藏模式。我需要编写代码，以使模态消失/在处理消息消失的同时被隐藏。如果有人能帮助我解决需要更改/添加到我的代码中的内容，以实现此目标，我将不胜感激。

Answer 1

您可以这样定义模态：

SELECT   S.NAME, SUM([QTY] * [PRICE]) AS SALES
    FROM    Invoices$ Inv INNER JOIN InvDetails$ InvD ON 
    Inv.INVOICE_ID=InvD.INVOICE_ID
          INNER JOIN Products$ P ON InvD.PRODUCT_ID=P.PRODUCT_ID
        INNER JOIN Stores$ S ON S.STORE_ID=Inv.STORE_ID
    GROUP BY S.NAME order by SALES desc

这不起作用，因为模态没有任何id属性，创建时只有类。分配它，或使用类

var modal = $('<div />');
modal.addClass("modal2");
$('body').append(modal); 

document.getElementById('modal2').style.display = 'none';

这是行不通的，因为jQuery中的类应使用点$（'。modal2'）;编写。而且，如果您未将任何插件用于模态，则代码应为

$('modal2').modal('hide');

Answer 2

在对此进行了一些进一步的研究之后，我找到了一种用于隐藏/消失模态的解决方案。我在另一页中找到了这段代码，该页面正在使用类似的代码，并且在处理完成后隐藏了模式：

<Triggers>
    <asp:PostBackTrigger ControlID ="MedicaidDataGenerateBillingFile_Generate" />
</Triggers>

我将此代码包含在我的代码中，并将ControlID设置为等于要单击的按钮ID，现在，当处理完成时，处理消息消失了，模态也消失了。

我希望这可以帮助其他人。

页面上完成处理后如何隐藏模式

2 个答案: