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。

设置一个jquery CONFIRM框

1 个答案: