jquery의 스타일 지정 확인 상자

Question

아래 스크립트는 특정 검사를 수행합니다.

사용자가 4 시간 미만 예약을 시도하는 경우 최소 4 시간이 필요하다는 알림을 사용자에게 제공합니다.

사용자가 4 시간 이상 예약을 시도하는 경우 사용자는 초기 4 시간 후 추가 시간 동안 추가 요금이 발생할 수 있음을 알려줍니다.

그런 다음 확인을 클릭하여 확인을 클릭하여 계속하거나 취소하면 4 시간 이내에 체류 할 수 있습니다.

모든 것이 효과적입니다.

그러나 확인 상자를 눈에 더 잘 보이게하고 싶습니다.

아이디어가 있습니까?

여기 내 전체 작업 스크립트와 감사의 말을 전합니다.

<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

CSS 태그가 나타내는대로 can not be styled with css 상자를 확인하십시오. 가장 좋은 방법은 jQueryUI dialog box입니다. 사실, jQueryUI 페이지에서 수행하려고 시도한 것의 specific example이 있습니다.