javascript - 页面处理完成后如何隐藏模态

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

您可以这样定义模态:

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

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

这不起作用，因为你的模态没有任何 id 属性，当你创建它时，只有类。要么分配它，要么使用该类

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

不行，因为jQuery中的类应该用点$('.modal2');来写 如果您没有使用任何模态插件，则代码应该是

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