Стилизация 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. На самом деле существует specific example того, что вы пытаетесь сделать на странице jQueryUI.