.net下采用bootstrap的模态框实现正在操作中。。。。提示

这段时间一直想实现一个正在操作中的提示,当点击操作按钮时,出现正在操作中弹出框,当程序运行完后,弹出框消失。
先自己写了前端代码:
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>正在操作中&hellip;</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>正在操作中&hellip;</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函数我很无奈啊

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值