0

ポップアップ 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です

感謝とよろしく

4

2 に答える 2

0

これはウィンドウのサイズ変更の問題であるため、ウィンドウのサイズが変更されるたびに関数を実行する必要があります。サンプルコード... 

$('.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 も使用しています。多分それはあなたを助けるでしょう:)

于 2013-06-04T09:44:00.397 に答える