用 HTML 填充 GAS ModalDialog 框 - 没有白色？选择？

Question

对于 Google 电子表格，是否有替代 showModalDialog 的方法？我愿意学习新软件。轻功老师学什么软件比较合适？

我在 Google 电子表格中为我的学生制作了一个 Connect 4 游戏。随机问题是从带有菜单项的各种选项卡中提取的，我想要一个漂亮的问题显示。 showModalDialog 和 HTML 中可能存在维度。我通过在 BODY 和 DIV 中或仅在 DIV 中添加维度来使它复杂化。对话框总是有一些白色显示并且 HTML 经常弹出滚动条（非常难看）。可能需要比 Google App Script 更强大的东西来创建问题的清晰显示。有人会建议什么？

这是html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style> 
       #parent {
         background-color: #99ec46; 
     /*  border: 5px solid #58a30d;  /*only shows on top & left sides?????  */ 
     /*  border-radius: 10px; */
         display:table;
         font-family:Georgia, Cambria, Times New Roman, Times, serif;
         font-size: 100%;
         height: 100%;
     /*       left: 50%; */
         margin: auto; 
         padding: 0;
         position: fixed;
         text-align:center;
     /*        top: 50%; */
         width: 100%;
       }
       #child {
     /*    align-items:center;  */
         display: table-cell;
     /*    justify-content:center; */
         padding: 55px 55px;
     /*    transform: translate(-50%, -50%); */
     /*    z-index: 99999; */
         vertical-align: middle;
       }
       input[type=button], input[type=submit], input[type=reset] {
         background-color: #438204;
         border: none;
         color: white;
         padding: 10px 26px;
         text-decoration: none;
         margin: 4px 2px;
         cursor: pointer;
       }
    </style>

  </head>
  <body> 
    <div id="parent">
      <div id="child">
        <?!= nextQuestion ?>
        <p></p>     
        <input type="button" value="Okay!" onclick="google.script.host.close()" />
      </div>
    </div>   
  </body>
</html>

这是显示问题的代码。有些问题很长，并且有 html 标记出现在多行 (

)。

/**
 * Displays an HTML-service dialog in Google Sheets that contains
 */
function popupNextQ(inQuestion) {

//  var html = HtmlService.createHtmlOutputFromFile('Index');

  var htmlTemplate = HtmlService.createTemplateFromFile('Next-Question-Popup');
  htmlTemplate.nextQuestion = inQuestion;
  var html = htmlTemplate.evaluate();
//            .setHeight(400)
//            .setWidth(600);
  SpreadsheetApp.getUi().showModalDialog(html, " ");  
}

这是迄今为止我想到的最好的。如果我向 html 添加边框，它只会出现在顶部和左侧。至少在当前尺寸下，我最长的问题没有滚动条。

问题未垂直对齐，因此较短的问题出现在绿色区域的顶部。

Answer 1

Alan Wells 在 googlegroups.com 中写道，您无法摆脱对话框边缘周围的白色 space。如果您想继续使用 Google 产品并想要替代品，则需要为您的应用使用 Apps Script Web App。

他建议使用 Web 应用程序创建问题框，而不是从 sheet 上的菜单触发。

我发现的嵌套 CSS 已经解决了所有文本出现在顶部的问题。

我终于找到了一种在 html 的所有边上添加边框的方法。 将边框放在父级中会导致它显示在顶部和左边。将它放在子项中会使其显示在顶部、底部和左侧。底部边框在绿色方块的中间 - 不在底部。

诀窍是将父 div 的大小从 100% 减小到 97%。我也试过99%和98%。您的边框宽度可能会影响您必须减少的量。

<style> 
       #parent {
         background-color: #99ec46;
         display:table;
         font-family:Georgia, Cambria, Times New Roman, Times, serif;
         font-size: 100%;
         height: 97%;
         margin: auto; 
         padding: 0;
         position: fixed;
         text-align:center;
         width: 97%;
       }
       #child {
         border: 5px solid #58a30d; 
         border-radius: 10px; 
         display: table-cell;
         padding: 55px 55px;
         vertical-align: middle;
       }

还要感谢 googlegroups 中的 Clark Lind 建议使用幻灯片而不是传播sheet。幻灯片也仅限于使用 showModalDialog.

显示 html

用 HTML 填充 GAS ModalDialog 框 - 没有白色？选择？

Fill GAS ModalDialog box with HTML - no white ? Alternative?

html

css

modal-dialog

google-sheets