2010-06-05 93 views
0

我想在n秒後顯示對話框並在m秒後隱藏它,但它不適用於我!jquery對話框打開和關閉不起作用

$(document).ready(function() { 
    var advanced = $("div#advanced"); 
    $(advanced).dialog({ autoOpen: false, 
     modal: true, 
     buttons: { "Try it now": function() { window.location = 'myURL'; }, 
      "No thank's": function() { $(this).dialog("close"); } 
     }, 
     show: 'fade', 
     width: 350, 
     height: 130, 
     draggable: false, 
     resizable: false 
    }); 
    window.setTimeout(function() { 
     $(advanced).dialog("open"); 
    }, n); 
    window.setTimeout(function() { 
     $(advanced).dialog("close"); 
    }, m);}); 
+0

你知道它只會在(m - n)秒內打開嗎?我沒有看到其他問題...... – MvanGeest 2010-06-05 11:57:20

+1

把'advanced'設置爲'$(「div#advanced」)''是多餘的,然後總是把它稱爲'$(advanced)' - 這是一個不必要的函數調用 – Pointy 2010-06-05 11:59:38

回答

1

將setTimeout移動到打開對話框的定時器的回調中。您可能還想在對話框關閉時清除計時器。

$(function() { 
    var advanced = $("div#advanced"); 
    advanced.dialog({ autoOpen: false, 
     modal: true, 
     buttons: { "Try it now": function() { 
         window.location = 'myURL'; 
        }, 
      "No thank's": function() { 
         $(this).dialog("close");; 
        } 
     }, 
     close: clearTimer, 
     show: 'fade', 
     width: 350, 
     height: 130, 
     draggable: false, 
     resizable: false 
    }); 
    var closeTimer = null; 

    setTimeout(function() { 
     advanced.dialog("open"); 
     closeTimer = setTimeout(function() { 
      closeTimer = null; 
      advanced.dialog("close"); 
     }, m); 
    }, n); 

    function clearTimer() { 
     if (closeTimer) { 
      clearTimeout(closeTimer); 
      closeTimer = null; 
     } 
    } 

}); 
+0

確定您的方法詞很好,但我想要一個像我自己的方法;) – Sadegh 2010-06-05 13:14:48

+0

@Sadegh - 除非打開,否則不需要關閉窗口。由於這些是依賴事件,因此關閉*的代碼應取決於打開的對話框。您將它們設置爲獨立事件,並且如果您更改了到期時間以便第二個比第一個更長,則它將起作用,但這取決於數字是否正確。我的方式在對話框打開之前不會啓動關閉計時器,然後它會在晚上關閉它,除非它已經被用戶關閉。在打開的對話框中設置關閉計時器甚至可能會更好/更強大。 – tvanfosson 2010-06-05 14:00:44

+0

對不起,我明白你的意思是不好/不好的解決方案,事實上我不明白你的意思。感謝'你的更深入的解釋 – Sadegh 2010-06-05 15:16:31

1

試着改變你的代碼了一下,像這樣:

$(document).ready(function() { 
    var advanced = $("div#advanced"); 
    advanced.dialog({ autoOpen: false, 
     modal: true, 
     buttons: { 
      "Try it now": function() { window.location = 'myURL'; }, 
      "No thank's": function() { $(this).dialog("close"); } 
     }, 
     show: 'fade', 
     width: 350, 
     height: 130, 
     draggable: false, 
     resizable: false 
    }); 
    setTimeout(function() { 
     advanced.dialog("open"); 
    }, n); 
    setTimeout(function() { 
     advanced.dialog("close"); 
    }, m); 
}); 

如尖在評論中指出的,你克隆advanced元素by wrapping it in $() again,這意味着元素你創建對話框上的元素試圖打開它是單獨的克隆,既不是原始的。直接使用advanced直接像我上面那樣,它已經是一個jQuery對象:)

+0

@Nike ;-)再次感謝你的小英雄,你的位置是天堂 – Sadegh 2010-06-05 12:13:44

+1

我不認爲它在這種情況下克隆jQuery元素實際上是有區別的,因爲對話框重用了底層的DOM元素。如果小部件在DOM之外保持某種狀態,那麼它可能會,但重新創建對話框小部件應該沒有關係。無論如何,在我的測試中似乎沒有。我同意,一旦你創建了這個元素,你應該簡單地使用它,但我不認爲這是造成這個問題的原因。 – tvanfosson 2010-06-05 14:21:57