如何单独设置搜索对应的Fancybox弹窗显示在页面顶部

完全支持单独配置单个Fancybox弹窗的显示位置，无需修改全局配置，不会影响现有图片、地图类弹窗的默认居中逻辑，针对搜索弹窗代码，按以下步骤修改即可实现顶部固定显示：

• 首先给搜索弹窗的触发标签加独立标识类，和其他通用Fancybox触发元素做区分，避免配置互相污染：

<a class="magnif fancybox-inline fancybox-search-trigger" href="#search"><i class="fa fa-search"></i></a>

原有搜索弹窗DOM结构（id为search的表单容器）不需要做任何改动。

• 单独为这个搜索触发元素绑定Fancybox配置，覆盖默认定位规则即可，不同版本实现方式如下：

Fancybox 3/4（当前主流版本） #

JS配置、纯CSS覆盖两种方案二选一即可：

• JS配置方案（兼容性更好，推荐）：
  在页面原有的全局Fancybox初始化代码之后，追加以下代码：

// 原有全局初始化代码保持不动，所有图片、地图弹窗继续沿用居中配置
$('.fancybox-inline').fancybox({
  // 原来写的全局配置项全部保留
})

// 单独为搜索弹窗配置顶部定位
$('.fancybox-search-trigger').fancybox({
  baseClass: 'fancybox-search-modal',
  onShow: function() {
    // 保持水平居中，垂直位置固定在距页面顶部20px位置，数值可按需调整
    this.$container.css({
      top: '20px',
      transform: 'translateX(-50%)',
      margin: 0
    })
  }
})

• 纯CSS方案（实现更简单）：
  直接追加以下样式，靠类名优先级保证样式只作用于搜索弹窗：

.fancybox-search-modal .fancybox-inner {
  position: fixed !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
}

Fancybox 2（旧版本） #

旧版本自带定位配置项，直接初始化时传参即可：

$('.fancybox-search-trigger').fancybox({
  autoCenter: false,
  // 数组四个值分别对应上、右、下、左四个方向的外边距，单位px
  margin: [20, 40, 40, 40],
  // 其他配置项和全局配置保持一致即可
})

配置注意事项 #

• 上述定位相关配置仅绑定到加了fancybox-search-trigger类的搜索触发元素，不会影响其他Fancybox弹窗的默认居中显示
• 顶部边距数值可根据页面固定头部的高度自行调整，避免弹窗被导航栏遮挡
• 默认Fancybox容器已经是fixed定位，如果需要弹窗始终固定在视口顶部不受页面滚动影响，不需要额外调整定位属性。

内容的提问来源于stack exchange，提问作者DarkOwl