layui 弹框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>cancel E-commerce booking </title>

    <link href="/booking/css/bootstrap.min.css" rel="stylesheet">
    <script src="/booking/js/jquery-1.11.3.min.js"></script>
    <script src="/booking/js/bootstrap.min.js"></script>
     <script src="/booking/layui/layui.all.js"></script>     
     <script src="/booking/js/cancelbooking.js"></script> 
  
    <!--  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
  
</head>
<body>


    <div class="container-fluid"                         
         style=" 802px; height: 450px; background:#d4d4d4  no-repeat ">


        <div class="row" style="height: 150px">
               <!--top part-->
        </div>
        <div class="row" >
            <div class="col-md-3 col-sm-3 col-xs-3 ">
               <!--left part -->
            </div>
            <div class="col-md-7 col-sm-7  col-xs-7 ">
            
               <div class="searchBox">
                 <form action="">
                    <input type="text" class="searchIpt f14"  style="height: 36px;300px " id="bookingNumber" name="bookingNumber" 
                    maxlength="100" autocomplete="off" placeholder="Please enter one booking number for cancel." required>
                    &nbsp
                    <input type="button" class="btn btn-warning"  style="height: 35px" onclick="cancelBooking()" value="Cancel Booking">
                 </form>
              </div>        
          
            </div>
            <!-- right part -->
            <div class="col-md-2 col-sm-2 col-xs-2">
            </div>
        </div>
    </div>
</body>
  <!-- <script type="text/javascript">
      

           function doCancel(bookingNo,message){
               layer.confirm(message,{btn: ['Yes', 'No'],title:"Cancel Booking"}, function(){
                   //add  loading
                   var loading0 = layer.load(2,{shade: [0.7, '#393D49']}, {shadeClose: true});
                      var url2 = "/booking/rs/cancelbooking/cancel/"+bookingNo;
                      $.ajax({
                              type: "get",
                              url: url2,
                              data: null,
                              dataType: "json",
                              async:true,
                              success:function(data1) 
                              {    
                                   if(data1.status == '200')
                                   {  //close loading
                                      layer.close(loading0)
                                       //layer.msg(data.message, {icon: 1});
                                       layer.alert(data1.message,{
                                        icon: 1,
                                        btn:'Ok',
                                        title: "Operation Result"
                                       });
                                   }else
                                   {      //close loading
                                         layer.close(loading0)
                                         layer.alert(data.message,{
                                            icon: 2,
                                            btn:'Ok',
                                            title: "Operation Result"
                                          });
                                   }
                              },
                                error: function(XMLHttpRequest, status, thrownError) 
                              {
                                layer.close(loading0);
                                layer.msg("Connection timeout, network exception !", {icon:7,time:1500});
                                return false;
                              }
                           });
                  });   
           }
  
  
           function cancelBooking(){
               var inputValue= $("#bookingNumber").val();
               // input is  null
               if(inputValue == null||inputValue==''||inputValue == undefined){
                   layer.msg("Please enter one booking number!", {icon:7,time:500});
                       return;  
                     }
               var url = "/booking/rs/cancelbooking/query/"+inputValue;
               //add loading
               var loading1 = layer.load(1,{shade: [0.7, '#393D49']}, {shadeClose: true});
               $.ajax({
                      type: "get",
                      url: url,
                      data: null,
                      dataType: "json",
                      async:true,
                      success:function(data) 
                       {
                          if(data.status == '200')
                          {
                            layer.close(loading1);
                            doCancel(inputValue,data.message);
                          }else
                           {
                            layer.close(loading1);
                            layer.alert(data.message,{
                                   icon: 2,
                                   btn:'Ok',
                                   title: "Operation Result"
                                   });
                           }
                      },
                      error: function(XMLHttpRequest, status, thrownError) 
                      {
                        layer.close(loading1);
                        layer.msg("Connection timeout, network exception !", {icon:7,time:1500});
                      return false;
                    }
                  });
             }

          
        </script>    -->
 
</html>
View Code