bootstrap中模拟模态框和进度条动态删除数据

本文是介绍用bootstrap的模态框和进度条动态展示操作

1：完成基本的布局

<table class="table table-striped">
    <caption style="text-align:center;">基本的表格布局</caption>
    <thead>
        <tr>
            <th>id：</th>
            <th>邮箱：</th>
            <th>密码：</th>
            <th>操作：</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.id</td>
                <td>@item.email</td>
                <td>@item.pwd</td>
                <td>
                    <a href="../../Home/edio">修改</a>
                    <a href="#" id="@item.id" class="remove">删除</a>
                </td>
            </tr>
        }


    </tbody>
</table>
<div>
    <span style="float:left">共 @ViewBag.count 条数据，当前第 @ViewBag.id 页</span>
    <ul class="pagination" style="float:right">


   @if (Convert.ToInt32(ViewBag.id)<=1)
   {
            <li><a href="#" style="">&laquo;</a></li>
   }
   else { 
   
    <li><a href="../../Home/Basic?id=@(Convert.ToInt32(ViewBag.id) - 1)" style="">&laquo;</a></li>
   }


 @for (int i = 1; i <=ViewBag.num; i++)
 {
      <li><a href=".././Home/Basic?id=@i">@i</a></li>
 }
        @if (Convert.ToInt32(ViewBag.id) >= ViewBag.num)
        {
            <li><a href="#" style="">&laquo;</a></li>
        }
        else
        {


            <li><a href="../../Home/Basic?id=@(Convert.ToInt32(ViewBag.id) + 1)" style="">&raquo;</a></li>
        }
       
    </ul>
</div>




<div class="modal" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">@*模态框*@
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
              
            </div>
            <div class="modal-body">
                <div class="progress progress-striped">//进度条
                    <div class="progress-bar progress-bar-success" role="progressbar"
                         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                         style="width: 10px;">
                 
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">
                    关闭
                </button>
            
            </div>
        </div>
    </div>


</div>

2：用脚本控制进度条和模态框

<script>
    $(function () {
        $("table a.remove").click(function () {
            var id = $(this).attr("id");


            $.ajax({
                url: '../../Home/edio',
                type: 'post',
                async:false,
                data: { "id": id },
                beforeSend: function () { //执行前事件
                    $("#myModal").modal('show');//显示模态框
                    $(".modal-header").html("<h2>正在删除<h2>");//更改模态框的标题，显示正在操作
                
                },
                success: function (data) {//执行回调函数
                    setTimeout(function () {//增加延迟，用于捕捉模态框的动画事件
                        if (data == "ok") {
                            $(".modal-header").html("<h2>删除成功<h2>");
                            $(".progress-bar").css({ "width": "100%" });
                        } else {
                          
                            $(".modal-header").html("<h2>删除失败<h2>");
                            $(".progress-bar").removeClass("progress-bar-success").addClass("progress-bar-danger").css({ "width": "100%" });
                        }
                    },500);//500表示延迟的时间
                }, error: function (error) {
                   
                }


            });


        });
    })


</script>

至此，简单模拟动态进度条操作就完成了，是不是很简单呢？