jquery - 设计 jquery CONFIRM 框的样式

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 页面上执行的操作。