我有一个弹出式 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 在我放大/缩小时用弹出窗口的源重新定位它自己,在我的例子中是它的图像
感谢和问候
最佳答案
这是窗口调整大小的问题,所以你需要在每次调整窗口大小时运行该函数。示例代码...
$('.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。也许它会对你有所帮助:)
关于javascript - 缩放浏览器时 div 位置发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16102615/