本文介绍了jQuery:视口中的中心花式框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当前我正在使用fancybox版本2来单击缩略图时显示我的图像,但是从水平方向来看,我似乎无法将fancybox垂直放置在视口中间.
I am currently using fancybox version 2 to display my images when a thumbnail is clicked but I can't seem to get the fancybox to sit in the middle of the viewport, vertically speaking, since horizontally it's fine.
我已经尝试了很多事情,这是最新的:
I've tried quite a few things and this is the latest:
CSS
.fancybox-wrap {
position: fixed !important;
top: 50px !important;
}
jQuery
jQuery(document).ready(function() {
$(".fancybox-wrap").css("position", "absolute");
// fancybox initialisation etc
});
$(window).scroll(function() {
$('.fancybox-wrap').css('top', $(this).scrollTop() + "50px");
});
有人有什么想法吗?
推荐答案
$(window).bind('resize', function() {
var top = ($(window).height() / 2) - ($(".fancybox-wrap").outerHeight() / 2);
var left = ($(window).width() / 2) - ($(".fancybox-wrap").outerWidth() / 2);
$(".fancybox-wrap").css({ top: top, left: left});
}).trigger('resize');
这篇关于jQuery:视口中的中心花式框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!