我有一个弹出式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用自己的弹出窗口重新定位自己的图像,当我放大/缩小时
感谢和问候
答案 0 :(得分: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。可能它会帮助你:)
答案 1 :(得分:0)
尝试使用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;
}