Ajax 删除功能显示样式

Ajax 删除功能样式

<div class="delect_order"  onclick="Show(this)" id="delect_s"  data-id="{$vo.order_id}">删除订单</div>
  <input type="hidden" id="ids" value="">
    <div class="xs1"></div>
	<div class="modal-dialog2">
		<div class="modal-title1">提示</div>
			<div class="modal-title2">确定要删除吗？</div>
	 <div class="hengqian"></div><div class="quxiao" >取消</div><div class="queding"  >确定</div>
	</div>

<style>
.xs1{
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #000000;
  position: fixed;
  top: 0;
  left: 0;
  z-index:9999;
  display: none;
}
.hengqian{
color:#00a2ff;
font-size:13px; 
width: 100%;
text-align: center;
border-bottom: 1px solid #f6f6f6; 
position: absolute;
 top: 68%;
 left: 0%;	
}
.quxiao{
background-color: 1px solid #fff;
color: #191919;float: left;
width:50%;  
font-size: 20px; 
text-align: center;    
padding-top: 15px;
position: absolute;
top: 68%;left: 0%;
}
.queding{
color: #61749b;
float:right;
width:50%;
position: absolute;
left: 50%;
padding-top: 15px;
height: 44%;
top: 68%;
font-size:20px;
border-left: 1px solid #f6f6f6;
text-align: center;
}
.modal-dialog2 {
  display: none;
  width: 72%;
  overflow: hidden;
  position: fixed;
  top: 32%;
  left: 9%;
  z-index: 9999;
  background: #fff;
  border-radius: 7px;
  margin: 0 auto 0 8px;
  height: 25%;
  padding-left: 13px;
  padding-right: 13px;
 
}
.modal-title1 {
  padding-top: 14%;
  font-size: 16px;
  color: #030303;
  text-align: center;
  font-weight: bold;
  
}
.modal-title2 {
    position: absolute;
    left: 32%;
    top: 40%;
    font-size: 16px;
    color: #9d9d9d;
    text-align: center;
}
</style>

<script>
    function Show(e){
    var id=e.getAttribute("data-id");
     $('#ids').attr('value',id);
     $('.xs1').css('display','block'); 
     $('.modal-dialog2').css('display','block'); 
     $('.quxiao').click(function(){
     $('.xs1').css('display','none'); 
     $('.modal-dialog2').css('display','none'); 
     })
      $('.queding').click(function(){
      	 var f1 = $('#ids').attr('value');
        if(f1!=''){
        $.post('{:url("api/order/delectorder")}',{order_id:id}, function(data){
        if(data==1){
       $('.xs1').css('display','none'); 
       $('.modal-dialog2').css('display','none'); 
       location.reload();
            }
            else{
              swal('删除失败');
              location.reload();
            }
            }, 'json'); 
     }
     else{
         swal('系统崩溃！');
     }
     })
   }
</script>

 //删除订单
  public function delectorder(){
  $order_id=$_POST['order_id'];
  $data['is_show_user']=0;
   $where['order_id']=$order_id;
	$res = Db::name('ns_order')->where($where)->update($data);
    if($res)
    {
      $num=1;
      return json_encode($num);
    }
    else
    {
      $num=0;
      return json_encode($num);
    }
  }