高級jQuery Popout窗口

1）我試圖讓這個腳本更有效地運行。

2）當用戶點擊彈出按鈕時，它會打開一個窗口並隱藏該元素。（目前我使用.detach（）刪除嵌入式視頻播放器，因爲在Firefox中.toggle（）只是隱藏播放器，但保持音頻播放。是否有更好的方法來做到這一點？

3）理論上再次點擊按鈕或手動關閉窗口，它應該隱藏或.toggle（）元素，但不會因爲detach（）而影響播放器。

4）如果用戶手動彈出窗口關閉它，然後再次彈出它，以便再次關閉它，元素不會再使用.toggle（）回來。

在這裏看到它的行動，http://www.mst3k.tv/。

$(document).ready(function() { 
    $('#lights').click(function(){$('#darkness').fadeToggle(500);}); 
    $("#lights").toggle(function(){$("#lights").attr('id','lightsoff');},function(){$("#lightsoff").attr('id','lights');}); 
    /**VIDEO**/ 
    var videoWin; 
    $('#video-toggle').click(function(){ 
     $('#video').fadeToggle(500); 
     $('#video').detach(); 
     }); 
    $('#video-toggle').click(function(){ 
     if (videoWin && !videoWin.closed) { 
     videoWin.close(); 
     return false; 
     } 
     videoWin = window.open(
     $(this).attr('rel'), 
     'videoWin', 
     'width=600,height=480,toolbar=0,top=0,left=0,menubar=0,location=0,status=0,scrollbars=0,resizable=1'); 
     return false; 
     } 
    ); 
    var watchVideo = setInterval(function() { 
     if (videoWin.closed) {clearTimeout(watchVideo);$('#video').show(500)} 
     return false; 
    }, 1); 
    /**CHAT**/ 
    var chatWin; 
    $('#chat-toggle').click(function(){ 
     $('#chat').fadeToggle(500); 
     /*$('#chat').detach();*/ 
     }); 
    $('#chat-toggle').click(function(){ 
     if (chatWin && !chatWin.closed) { 
     chatWin.close(); 
     return false; 
     } 
     chatWin = window.open(
     $(this).attr('rel'), 
     'chatWin', 
     'width=320,height=480,toolbar=0,top=0,left=601,menubar=0,location=0,status=0,scrollbars=0,resizable=1'); 
     return false; 
     } 
    ); 
    var watchChat = setInterval(function() { 
     if (chatWin.closed) {clearTimeout(watchChat);$('#chat').show(500)} 
     return false; 
    }, 1); 
    /*$("a.btn").fitText(1.2, { minFontSize: "6px", maxFontSize: "14px" });*/ 
});

來源

2013-03-13 spencerthayer

這將是更好，如果你創建了一個jQuery插件代碼，以便您可以重新使用，並避免乾燥。這裏有幾個選項：

插件1：jQuery popupWindow

插件2：jQuery winPop

還要注意的是closed屬性不是任何W3C規範的一部分，但它可能會跨瀏覽器的支持。

來源

2013-03-13 02:51:14 user2163567

你也可以編寫一個可以重用的JS函數。根據w3cschools websitewindow.closed屬性在大多數主流瀏覽器中都受支持，您可以在觸發事件之前檢查它。

，而不是

if(videoWin && !videoWin.closed)

你可以使用

if (typeof videoWin!='undefined'){ /* it has been created */} 
elseif(typeof videoWin='undefined') { /*it's okay to open the new window*/}

確保你沒有創造，如果你使用，雖然這作爲檢查的變量，直到窗口打開的事件已經被解僱。由於您在函數聲明上方創建了幾行代碼，它將始終按照定義返回。

您需要在函數中指定一個目標對象，讓它正確地拋出多個窗口......這意味着您無法爲多個窗口聲明一個var。也許一個班會更好。

東西我認爲是早期奇怪，但忘了提FB發佈之前我的反應過早是你想要添加您在相對屬性HREF並指定HREF作爲一個js：無效（0），這是也是非標準的。 rel屬性用於指定鏈接和頁面之間的關係...（例如，rel = nofollow）。這也可能是它爲什麼不在一些時間點火和失誤，以及瀏覽器響應之間的差異。

來源

2013-03-13 08:02:03

高級jQuery Popout窗口

回答

相關問題