jquery fancybox位于页面左上角

Question

网站是：www.prodevcoind.com/pcr42/

单击图像时Fancybox显示非常糟糕。

左上方的fancybox很小。

任何人都可以给我一个线索吗？

Answer 1

您正在使用fancybox js 文件 v2.1.5 但是使用fancybox css 文件 v1.3.4

由于fancybox（v2.1.5）找不到合适的css选择器，因此它使用默认的最小大小100px并且它完全“没有样式”

编辑（2013年11月1日）：OP评论道：

Now, with the correct css file, it<s better 
but still at the top left of the page

说明 ：

你的global css文件中有这个css rul：

html * {
  border: 0 none;
  font-family: 'Roboto Condensed','RobotoRegular';
  font-weight: normal !important;
  margin: 0;
  outline: 0 none;
  padding: 0;
}

将 html 后代（包括fancybox）的margin: 0;设置为全部，这就是为什么fancybox位于屏幕的左上角（所有边距都设置为0）

通常情况下，从插件中编辑原始文件并不是一个好主意（如果你升级，这些更改会丢失，很可能你会这样做）但是通过自定义css或js文件改变它们的行为

Answer 2

看起来fancybox div的高度是100px。尝试通过Google Chrome中的“Inspect Element”或Firefox中的“Firebug”编辑高度，看看它如何解决您的问题。完成后，尝试在代码中编辑它。

Answer 3

在您的css文件http://www.prodevcoind.com/wp-content/themes/nemo/fancybox/jquery.fancybox-2.1.5.css?ver=1.0

中

查找

.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}

并将其替换为

.fancybox-lock .fancybox-overlay {
left: 25%;
top: 10%;
}

Answer 4

查找

.fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020; }

并将其替换为

.fancybox-wrap { position: absolute; z-index: 8020; left: 25% !important; top: 10% !important; }