Drupal：打开模态框时阻止页面滚动的问题

以下是几个经过验证的可行解决方案，针对多区块AJAX按钮触发模态框后页面跳顶的问题：

方案1：锁定页面滚动位置并禁用背景滚动 #

通过监听模态框的打开/关闭事件，保存当前滚动位置并锁定页面，避免跳顶：

步骤1：修改按钮的PHP属性 #

为按钮添加模态框配置选项，确保模态框初始化时不触发自动滚动：

// 订阅按钮配置
$form['btn_actions']['subscribe_for_free_btn'] = [
  '#type' => 'link',
  '#title' => $btnJoin,
  '#url' => $subscribeLink,
  '#attributes' => [
    'class' => ['btn-subscribe', 'use-ajax'],
    'data-dialog-type' => 'modal',
    'data-dialog-options' => json_encode([
      'autoResize' => FALSE,
      'modal' => TRUE,
    ]),
  ],
];

// 登录按钮配置
if (!$isAuthenticated) {
  $form['btn_actions']['login_btn'] = [
    '#type' => 'link',
    '#title' => $btnLogin,
    '#url' => $loginLink,
    '#attributes' => [
      'class' => ['btn-login', 'use-ajax'],
      'data-dialog-type' => 'modal',
      'data-dialog-options' => json_encode([
        'autoResize' => FALSE,
        'modal' => TRUE,
      ]),
    ],
  ];
}

步骤2：添加自定义JavaScript #

创建一个自定义JS文件（或添加到现有主题/模块的JS中）：

(function ($, Drupal) {
  let savedScroll = 0;

  // 模态框打开时锁定滚动
  $(document).on('drupalModalOpen', () => {
    savedScroll = $(window).scrollTop();
    $('body').css({
      overflow: 'hidden',
      position: 'fixed',
      top: `-${savedScroll}px`,
      width: '100%'
    });
  });

  // 模态框关闭时恢复滚动
  $(document).on('drupalModalClose', () => {
    $('body').css({ overflow: '', position: '', top: '' });
    $(window).scrollTop(savedScroll);
  });
})(jQuery, Drupal);

方案2：禁用AJAX自动聚焦行为 #

Drupal的AJAX默认会聚焦到模态框内的第一个可交互元素，这是导致页面跳顶的常见原因。通过以下JS阻止这一行为：

(function ($, Drupal) {
  // 点击AJAX按钮时提前保存滚动位置
  $(document).on('click', '.use-ajax[data-dialog-type="modal"]', () => {
    Drupal.ajaxScrollPos = $(window).scrollTop();
  });

  // 内容加载完成后阻止自动聚焦并恢复滚动
  $(document).on('drupalContentLoaded', (event, data) => {
    if (data.$element.closest('.ui-dialog').length) {
      data.$element.find(':tabbable').first().blur();
      $(window).scrollTop(Drupal.ajaxScrollPos || 0);
    }
  });
})(jQuery, Drupal);

方案3：清理链接中的无效锚点 #

检查你的$loginLink和$subscribeLink是否包含空锚点（如#）或指向页面顶部的锚点，这类锚点会触发页面滚动。确保链接使用正确的路由生成：

// 示例：生成登录页面的正确链接，无多余锚点
$loginLink = \Drupal\Core\Url::fromRoute('user.login', [], ['absolute' => TRUE]);

内容的提问来源于stack exchange，提问作者hamdi ben henda