样式化一个 jquery CONFIRM 框答案

【问题标题】：Styling a jquery CONFIRM box样式化一个 jquery CONFIRM 框
【发布时间】：2015-02-07 00:18:04
【问题描述】：

下面的脚本执行某些检查。

如果用户尝试预订少于四个小时的预订，则会发出警报，告知用户至少需要四个小时。

如果用户尝试预订超过四个小时，再次提醒用户，在最初的四个小时之后的任何额外小时内都可能会产生额外费用。

然后会向用户显示一个确认框，单击“确定”继续或取消以在四个小时内停留。

一切都很好。

不过，我们想让确认框更吸引眼球。

任何想法如何做到这一点？

这是我的整个工作脚本，提前致谢。

<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>

【问题讨论】：

confirm 不是 jQuery，不能设置样式。你必须使用类似 jQuery UI 对话框的东西。
r = false; $($("<div>There may be additional fees for going over the 4 hours!</div>")).dialog({ closeOnEscape: false, resizable: false, modal: true, open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }, buttons: { "OK": function() { r = true; $( this ).dialog( "close" ); }, Cancel: function() { r = false; $( this ).dialog( "close" ); } }, close: function() { return r; } });
您能否以一种我可以为您的解决方案归功于您的方式做到这一点？
不幸的是，因为问题已经关闭，所以没有。很高兴它对你有用！欢呼
我想补充一点，这个问题没有询问有关使用 CSS 设置确认框的样式，因此不是重复的。在这种情况下，我会要求@David Thomas 重新提出问题。

标签： jquery

【解决方案1】：

确认框can not be styled with css，正如您的 CSS 标记所建议的那样。你最好的选择是使用jQueryUI dialog box。事实上，在 jQueryUI 页面上有一个 specific example 表示您正在尝试执行的操作。

【讨论】：