bootstrap模态框使用案例

<span data-toggle="modal" data-target="#editClassifyModal"><button type="button" value="true" class="btn btn-primary" style="margin-left: 30px">添加</button></span>

<a href="javascript:;"  οnclick="return get_classify_info({$val['id']});" class="btn btn-info btn-xs">
   <i class="fa fa-pencil"></i>编辑
</a>

<div class="modal fade" id="editClassifyModal" tabindex="-1" role="dialog" aria-labelledby="ClassifyModalLabel">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="ClassifyModalLabel">编辑分类</h4>
         </div>
         <div class="modal-body">
            <form method="post" id="form_data_classify">
               <input type="hidden" name="id" id="ec_id" value="">
               <input type="hidden" name="act" id="ec_act" value="add">
               <div class="form-group" style="margin-bottom: 10px;">
                  <label for="recipient-name" class="control-label">课程分类名:</label>
                  <input type="text" class="form-control" name="name" id="ec_name">
               </div>

               <div class="form-group">
                  <label for="status">状态</label>
                  <input type="radio" name="status" checked class="ec_status" value="1">开启
                  <input type="radio" name="status" class="ec_status" value="-1">关闭
                  <input type="radio" name="status" class="ec_status" value="-2">删除
               </div>
            </form>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" οnclick="edit_classify()">提交</button>
         </div>
      </div>
   </div>
</div>

<script>

   //关闭模态框时清空内容
   $(function () {
      $('#editClassifyModal').on('hide.bs.modal', function () {
         // 关闭时清空edit状态为add
         $("#ec_act").val("add");
         $("#ec_name").val('');
         $("#ec_id").val('');
         $(".ec_status").eq(0).prop("checked", true);
         $(".ec_status").eq(0).siblings().prop("checked", false);
      })
   });

   //修改操作将相应内容获取并放入模态框
   function get_classify_info(cid){
      $.post('/admin/xxx/editxxx',{ form_data:"id="+cid+"&act=getinfo" }, function (data) {
            console.log(data);
            if(data['state'] == "success") {
               $("#ec_id").val(data.id);
               $("#ec_act").val("edit");
               $("#ec_name").val(data.name);

               //根据返回数据将指定的radio设置为选中状态
               var radioObj = $('.ec_status');
               for(var i=0; i<radioObj.length;i++){
                  if(radioObj[i].value == data.status){
                     radioObj[i].checked = true;
                     break;
                  }
                  radioObj[i].checked = false;
               }
               $('#editClassifyModal').modal('show');
            }

         }
      );
   }

   //模态框提交数据
   function edit_classify(){
      console.log($('#form_data_classify').serialize());
      $.ajax({
         url: "/admin/xxxx/editxxxx",
         data:{
            "form_data":$('#form_data_classify').serialize(),
         },
         type: "post",
         success:function(data) {
            console.log(data);
            if(data['state'] == "success") {
               $('#editClassifyModal').modal('hide');
               layer.msg(data.info,{ icon: 1,time:1000,shade: [0.3, '#393D49'],shadeClose:true },function(){
                  window.location.reload();//刷新当前页面
               });
            }else {
               $('#editClassifyModal').modal('hide');
               layer.msg(data.info,{ icon: 2,time:1500,shade: [0.3, '#393D49'],shadeClose:true },function(){
                  window.location.reload();//刷新当前页面
               });
            }
         },
         error:function() {
            alert('请求出错');
         }
      });
      return false;
   }
</script>