问题描述
我有一个包含按钮的网页。 单击该按钮时，它将在该过程后面的代码中调用一些代码。 我想显示一条“处理中”消息和一个使其模态化的消息，以便用户在执行其他任何操作之前必须等待处理完成。 单击按钮时，我使用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函数末尾列出的几件事，但它们都无法隐藏模式。 我需要编写代码，以使模态消失/在处理消息消失的同时被隐藏。 如果有人可以帮助我解决需要更改/添加到代码中的内容以实现此目的，我将不胜感激，在此先感谢您。
1楼
您可以这样定义模态：
var modal = $('<div />');
modal.addClass("modal2");
$('body').append(modal);
document.getElementById('modal2').style.display = 'none';
这不起作用，因为模态没有任何id属性，当您创建它时，它只有类。 分配它，或使用类
$('modal2').modal('hide');
它不起作用，因为jQuery中的类应使用点$（'。modal2'）;编写。 如果您不使用任何插件作为模态，则代码应为
$('.modal2').hide();
2楼
在对此进行了一些进一步的研究之后，我找到了一种隐藏/消失模态的解决方案。 我在另一页中找到了这段代码，在该页面中使用了类似的代码，并且在处理完成后隐藏了模态：
<Triggers>
<asp:PostBackTrigger ControlID ="MedicaidDataGenerateBillingFile_Generate" />
</Triggers>
我将此代码包含在我的代码中，并将ControlID设置为等于要单击的按钮ID，现在，当处理完成时，处理消息消失了，模态也消失了。
我希望这可以帮助其他人。