这段时间一直想实现一个正在操作中的提示,当点击操作按钮时,出现正在操作中弹出框,当程序运行完后,弹出框消失。
先自己写了前端代码:
html 5
<button class="btn btn-default" type="button" id="btnCer"> 我是按钮</button>
<div class="modal fade" tabindex="-1" role="dialog" id="about">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<p>正在操作中…</p>
</div>
<!-- <div class="modal-footer" >
<button id="#alertclose" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div> -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
js代码`
$('#btnCer').click(function () {
$('#about').modal({ show: true, backdrop: 'static', keyboard: false });
// setTimeout(function () {
// $('#about').modal('hide');
// }, 2000);
$('#about').modal('hide');
});
无论采用延时消失模态框还是直接让模态框消失,都是可以实现,但是在.net中就无法实现,错误有:
(1)模态框在后台采用ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "key", "closealert();alert('1');", true);
关闭时,它却无法关闭。
这个真的是纠结了好久,我换了好几种后台调用前台js的方式,都是无法实现关闭模态框,但是动态调试以后是可以关闭的,我觉得可能是时间的原因造成的,果然,我在后台代码中添加了System.Threading.Thread.Sleep(500);
可以了,亲测至少需要间隔0.5s左右。
(2)当模态框消失后,因为采用的是modal.(‘hide’),遮盖层没有消失,百度了一下,通过F12,发现遮盖层的div还在,消除它。
$('.modal-backdrop').remove();
(3)消失以后,还有一个bug ,整个页面还是遮盖层的效果,滚动条消失,网上说局部刷新就可以,不太会局部刷新,直接刷新了整个页面,这种方法也可以,但是页面保存的信息就没了,pass,经过一番寻找和f12查看,将body的class=“modal-open”,去掉以后就ok了
$("body").removeClass('modal-open');
(4) 消失以后,模态框的层级还在我们的页面之上,造成无法点击页面,所以添加 $("#about").css(‘display’, ‘none’);
整个效果就可以实现了。
源码:
前端:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
function addconfirm(btnadd) {
$('#about').modal({ backdrop: 'static', keyboard: false });
}
function closealert() {
$('#about').modal('hide');
$('.modal-backdrop').remove();
$("body").removeClass('modal-open');
$("body").css('padding-right', '0px');
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Button ID="btnAdd" type="button" runat="server" Text="提交订单" class="btn btn-primary" OnClick="btnAdd_Click"
OnClientClick="addconfirm(this)" />
<div class="modal fade" tabindex="-1" role="dialog" id="about">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<p>正在操作中…</p>
</div>
<div class="modal-footer">
<button id="alertclose" runat="server" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
后端:
protected void btnAdd_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(500);
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "key", "closealert();alert('ok')", true);
//alertclose.Attributes.Add("onclick", "document.getElementById('about').modal('hide')");
}
当然还有一个问题,我经过反复测试,sleep()函数关闭了整个系统的运行,才导致modal关闭的,大家谁有更好的办法欢迎和我联系!
其实模态框hide以后,我所说的那些步骤都应该自动实现,但是它不执行hide函数我很无奈啊