请等待对话框的 jquery 实现 - Safari 特定问题

Question

我的目标是显示一个非模态 jquery-ui 对话框，该对话框将显示请等待消息以及加载动画。此对话框将显示在用户来自的页面上，而不是继续。我在很大程度上已经使用下面的代码进行了这项工作。但是，Safari 不会显示请稍候对话框。 Firefox 和 Chrome 显示对话框和以下 href。 Safari 只是跟随 href，但不会显示对话框。

如果我尝试使用 preventDefault();或返回 false；在 click 事件处理程序中，safari（和所有浏览器）将显示请等待对话框，但当然它不会遵循 href。因此，我确实想要转到单击的 href 的默认行为，就在转到 href 时，我希望显示对话框。

我什至尝试做一个点击处理程序并在里面做一个 preventDefault()，然后打开对话框然后设置 window.location 或 location.href，但 Safari 仍然会跟随 href 而不会显示对话框。

还有人有其他想法吗？

javascript：

    $(document).ready(function() {

        // Register the pleaseWaitDialog element as a jquery-ui dialog widget with certain options set 
        $("#pleaseWaitDialog").dialog({
            autoOpen: false,
            buttons: {},
            open: function(event, ui) { $(".ui-dialog-title, .ui-dialog-titlebar-close").hide(); }, // hide the dialog title bar 
            resizable: false,
            show: {effect: 'fade', duration: 500},
            height: 120,
            width: 300
        });

        // When a link to add a meeting is clicked, then display the please wait dialog 
        $("a.addMeetingLink").click(function(e) {
            // But wait 5 seceonds before displaying the please wait dialog 
            setTimeout(function () {
                $("#pleaseWaitDialog").dialog("open");
            }, 5000);
        });

    }); 

HTML：

<a href="/ripplemobile/trip/addmeeting/81/1/305/308" class="addMeetingLink">Add Meeting</a>

<div id="pleaseWaitDialog">
    <div>
        <p>Please wait</p>
        <img src="/ripplemobile/images/ajax-loader.gif" />
    </div>
</div>

Answer 1

快速点，编辑这个函数：

// When a link to add a meeting is clicked, then display the please wait dialog 
        $("a.addMeetingLink").click(function(e) {

            // ADD

            e.preventDefault();

            // But wait 5 seceonds before displaying the please wait dialog 
            setTimeout(function () {
                $("#pleaseWaitDialog").dialog("open");
            }, 5000);
        });

这应该可以解决您当前的问题。