GAS对话框中绝对定位的Emoji选择器如何突破窗口限制？

在Google Apps Script中开发模态对话框并集成emoji-picker-element组件时，发现绝对定位的选择器被严格限制在对话框范围内，调整z-index、position等CSS属性无法突破边界，只能通过放大对话框适配。

问题原因 #

Google Apps Script的showModalDialog生成的对话框是通过沙箱化iframe渲染的，Google的外层容器默认设置了overflow: hidden，同时浏览器的同源策略限制了iframe内的元素无法突破到父页面。这导致任何基于iframe内部的CSS调整都无法让元素超出对话框边界。

可行解决方案 #

方案1：改用侧边栏（Sidebar）替代模态对话框

侧边栏的iframe没有严格的溢出限制，元素可以自然超出侧边栏可视范围。只需将showModalDialog替换为showSidebar即可：

修改Debug.js中的代码：

function emojiTest() {
  const html = HtmlService.createTemplateFromFile('forms/EmojiTest');
  var htmlOutput = html.evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setWidth(300); // 侧边栏宽度固定，高度自适应
  
  SpreadsheetApp.getUi().showSidebar(htmlOutput, 'Test Emoji');
}

同时调整EmojiTest.html中的样式，优化侧边栏布局并让选择器弹出到侧边栏外：

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>

  <style>
    /* emoji */
    .tooltip:not(.shown) {
      display: none;
    }

    .tooltip {
      position: absolute;
      top: 0;
      left: 300px; /* 对齐侧边栏右侧，弹出到外部 */
      z-index: 9999;
    }

    body {
      padding: 1rem;
    }
  </style>
</head>
<body>
  <form id="nameChangeForm" onsubmit="">
    <input type="text" name="cat" required id="nameField">
    <button onclick="event.preventDefault();">😏</button>
    <div class="tooltip" role="tooltip">
      <emoji-picker></emoji-picker>
    </div> 
    <div id="buttons">
      <input type="submit" value="Submit">
    </div>
  </form>

  <script type="module">
    import insertText from 'https://cdn.jsdelivr.net/npm/insert-text-at-cursor@0.3.0/index.js'
    document.querySelector('emoji-picker').addEventListener('emoji-click', e => {
      insertText(document.querySelector('input'), e.detail.unicode)
    })
  </script>

  <script type="module">
    import * as Popper from 'https://cdn.jsdelivr.net/npm/@popperjs/core@^2/dist/esm/index.js'
    const button = document.querySelector('button')
    const tooltip = document.querySelector('.tooltip')
    Popper.createPopper(button, tooltip)

    document.querySelector('button').onclick = () => {
      tooltip.classList.toggle('shown')
    }
  </script> 
</body>
</html>

方案2：动态调整模态对话框尺寸（兼容原有模态框需求）

如果必须使用模态对话框，可在打开emoji选择器时动态调整对话框大小，选择完成后恢复：

在Debug.js中添加调整尺寸的函数：

function emojiTest() {
  const html = HtmlService.createTemplateFromFile('forms/EmojiTest');
  var htmlOutput = html.evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setWidth(250)
    .setHeight(250);

  SpreadsheetApp.getUi()
    .showModalDialog(htmlOutput, 'Test Emoji'); 
}

// 新增：调整对话框尺寸的函数
function adjustDialogSize(width, height) {
  const html = HtmlService.createTemplateFromFile('forms/EmojiTest');
  var htmlOutput = html.evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setWidth(width)
    .setHeight(height);
  
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Test Emoji');
}

修改EmojiTest.html中的交互逻辑：

<script type="module">
  import * as Popper from 'https://cdn.jsdelivr.net/npm/@popperjs/core@^2/dist/esm/index.js'
  const button = document.querySelector('button')
  const tooltip = document.querySelector('.tooltip')
  Popper.createPopper(button, tooltip)

  // 保存原始对话框尺寸
  const originalWidth = 250;
  const originalHeight = 250;

  document.querySelector('button').onclick = () => {
    const isShown = tooltip.classList.toggle('shown');
    // 调用后端调整对话框尺寸
    google.script.run.withSuccessHandler(() => {
      Popper.createPopper(button, tooltip);
    }).adjustDialogSize(isShown ? 600 : originalWidth, isShown ? 500 : originalHeight);
  }
</script>

注意事项 #

• 方案1是最简洁的解决方式，无需复杂的尺寸调整逻辑，用户体验更流畅。
• 方案2需要额外处理对话框重新打开时的表单数据保存问题，可通过google.script.run将表单状态临时存储到后端。

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