縮放瀏覽器時div位置更改

Question

我有一個彈出div，它的工作正常，並且當我單擊圖像時會彈出，現在當我放大或縮小時，彈出div會停留在它的位置，因為它的位置是絕對的，當我將其更改為相對時，它會彈出在不同的地方，css和javascript如下：

的CSS

.set_pop{
                position:absolute;
                margin-right: 50px;
                margin-top:10px;
                width:100px;
                -webkit-box-shadow: #666 0px 2px 3px;
                -moz-box-shadow: #666 0px 2px 3px;
                box-shadow: #666 0px 2px 3px;
                border-radius:5px;
                -moz-border-radius:5px;
                -webkit-border-radius:5px;
                z-index:10;
                background-color: #ffffff;
                color:#000;
            }

js

 $('.settings img').live('click', function(event){
               event.stopPropagation();
                 var popup_div = $('.set_pop');
                var obj = $(this);
                var offset = obj.offset();

                var new_top = offset.top + 30;

                var new_left = offset.left;

                new_left = new_left - ( popup_div.width() / 2);
                new_left = new_left + ( obj.width() / 2);

                popup_div.css('left', new_left + 'px');
                popup_div.css('top', new_top + 'px');

                popup_div.show();
            });

我需要的是這個div，當我放大/縮小時，使用彈出窗口的源將其自身重新定位為我的圖像

謝謝並恭祝安康

Answer 1

這是調整窗口大小的問題，因此您需要在每次調整窗口大小時運行該函數。 示例代碼...

$('.settings img').live('click', function(event){
    $('#hidid').attr('value', $(this).attr('id'));              
    showDiv(this.id);
});

window.onresize = function() {
    var id = $('#hidid').attr('value');
    showDiv(id);
};

function showDiv(id) {
    var popup_div = $('.set_pop');
    var obj = $('#'+id);
    var offset = obj.offset();

    var new_top = offset.top + 30;
    var new_left = offset.left;
    new_left = new_left - ( popup_div.width() / 2);
    new_left = new_left + ( obj.width() / 2);

    popup_div.css('left', new_left + 'px');
    popup_div.css('top', new_top + 'px');
    popup_div.show();
}

而html部分，我有一個隱藏字段來存儲單擊圖像時的ID ...您可以用自己的方式存儲它。 順便說一句，我也為每個圖像使用了id。 可能會幫助您:)

Answer 2

嘗試使用position:fixed; 代替position:absolute; 。 固定位置將使盒子保持不變。 如果您使用絕對值，則在向下滾動頁面時該框將彈出。 當使用固定位置時，請使用左右兩邊距。 像這樣

.set_pop{
    position:fixed;
    right: 50px;
    top:10px;
    width:100px;
    -webkit-box-shadow: #666 0px 2px 3px;
    -moz-box-shadow: #666 0px 2px 3px;
    box-shadow: #666 0px 2px 3px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    z-index:10;
    background-color: #ffffff;
    color:#000;
}