設計一個jquery確認框

Question

下面的腳本執行某些檢查。

如果用戶嘗試預訂時間少於四小時，會發出警告，建議用戶至少需要四小時。

如果用戶嘗試預訂時間超過四小時，則再次建議用戶在最初四小時後的任何額外小時內可能累積額外費用。

然後向用戶呈現確認框以單擊確定繼續或取消以在四小時內停留。

一切都很好。

但是，我們希望使確認框更吸引眼球。

任何想法如何做到這一點？

這是我的整個工作腳本，並提前致謝。

<script type="text/javascript"> 
      $(window).load(function() { 
       $("#txtFromDate").datepicker(); 
       $('#timeStart').timepicker({ showPeriod: true, 
        onHourShow: OnHourShowCallback, 
        onMinuteShow: OnMinuteShowCallback 
       }); 

       $("#txtToDate").datepicker(); 
       $('#timeEnd').timepicker({ showPeriod: true, 
        onHourShow: OnHourShowCallback, 
        onMinuteShow: OnMinuteShowCallback 
       }); 
       function OnHourShowCallback(hour) { 
        if ((hour > 20) || (hour < 6)) { 
         return false; // not valid 
        } 
        return true; // valid 
       } 
       function OnMinuteShowCallback(hour, minute) { 
        if ((hour == 20) && (minute >= 30)) { return false; } // not valid 
        if ((hour == 6) && (minute < 30)) { return false; } // not valid 
        return true; // valid 
       } 
       $('#btnSearch').on('click', function() { 
        var sDate = $("#txtFromDate").val(); 
        var sTime = $("#timeStart").val(); 

        var eDate = $("#txtToDate").val(); 
        var eTime = $("#timeEnd").val(); 

        var startDate = new Date(sDate + " " + sTime).getHours(); 
        var endDate = new Date(eDate + " " + eTime).getHours(); 

        //Calulate the time difference 
        var hourDiff = endDate - startDate; 
        //alert(hourDiff); 

        //Check if hour difference is less than 4 hours and show the message accordingly 
        if (hourDiff < 4) { 
         alert("A mininum of 4 hours is required!"); 
         return false; 
        } 
        //Here you add the check condition if you are above the 4 hours time frame 
        //Add the check condition if the user is above the 4 hours time frame 
        if (hourDiff > 4) { 
         var r = confirm("There may be additional fees for going over the 4 hours!"); 
         if (r == true) { // pressed OK 
          return true; 
         } else { // pressed Cancel 
          return false; 
         } 
        } 
       }); 
      }); 
     </script> 

Answer 1

確認框can not be styled with css，正如您的CSS標籤所示。你最好的選擇是去jQueryUI dialog box。實際上，您正在嘗試在jQueryUI頁面上執行的操作有specific example。