jQuery Popup中的窗口大小調整問題

我開始自己寫一個非常簡單的jQuery Popup。jQuery Popup中的窗口大小調整問題

下面是代碼

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#pop").click(function(){ 
     openPopup(); 
    }); 
    $("#close").click(function(){ 
     closePopup(); 
    }); 
    }); 

function openPopup(){ 
$("#overlay_form").css({ 
    left: ($(window).width() - $('#overlay_form').width())/2, 
    top: ($(window).width() - $('#overlay_form').width())/7, 
    position:'absolute' 
}); 

$("#overlay_form").fadeIn(1000); 

    } 
function closePopup(){ 
$("#overlay_form").fadeOut(500); 
} 

$(window).bind('resize',openPopup); 

</script>

一切工作正常。但問題是在這裏代碼

$(window).bind('resize',openPopup);

此代碼是保持彈出窗口在瀏覽器的中心。但是，即使我關閉彈出窗口後，如果我調整瀏覽器的大小，此代碼再次打開彈出窗口。

我需要在代碼中的某處使用if條件！在哪裏使用以及如何使用？請給我一個解決方案！

來源

2012-04-29 agurchand

我認爲你不應該調整窗口大小時彈出窗口的大小。這是矯枉過正，用戶不希望彈出窗口在調整窗口大小或最大化窗口時更改其大小。 – allenhwkim

@ bighostkim其實我沒有調整彈出窗口的大小。我只是保持彈出在中心。 – agurchand

從函數中刪除.fadeIn()並將其放置在點擊處理程序中。

$("#pop").click(function(){ 
    $("#overlay_form").fadeIn(1000); 
    resizePop(); 
}); 


function resizePop(){ 
    if(!$("#overlay_form").is(':visible')){ 
    return; 
    } 
    $("#overlay_form").css({ 
     left: ($(window).width() - $('#overlay_form').width())/2, 
     top: ($(window).width() - $('#overlay_form').width())/7, 
     position:'absolute' 
    }); 
} 

$(window).bind('resize',resizePop);

來源

2012-04-29 15:39:25

感謝馬克。工作正常。 – agurchand

所有bind首先已過時，使用.on()從jQuery的1.7和明年，當彈出對話框淡出，所以限制了調整大小，然後事件處理程序，一個功能使腳本打破你的事件處理失敗。

$(window).on('resize',function() { 
    openPopup(); 
});

來源

2012-04-29 15:33:01 Starx

if($("#overlay_form").is(':visible')) { 
    // it's showing, so recenter it 
} 
else { 
    // it's hidden, so you don't care 
}

我建議你從開放代碼分開重新對碼，所以你可以根據情況更具體的給他們打電話。

來源

2012-04-29 15:36:45 Marc

您正在尋找的解決方案非常簡單 - 當您找到它時。。。

在文檔就緒函數中，添加一個在瀏覽器調整大小事件期間觸發的函數;該功能重新中心內您的對話框：

$(document).ready(function() { 

    $(window).resize(function() { 
     $('#overlay_form').dialog('option', 'position', 'center'); 
    }); 

});

順便說一句，當你打開你的對話框沒有必要指定頂部或左側，作爲默認位置是中鋒。

來源

2012-06-24 04:36:34

jQuery Popup中的窗口大小調整問題

回答

相關問題