用HTML填充气体模式对话框-没有白色？可供替代的_Html_Css_Google Sheets_Modal Dialog

用HTML填充气体模式对话框-没有白色？可供替代的

html css google-sheets

用HTML填充气体模式对话框-没有白色？可供替代的,html,css,google-sheets,modal-dialog,Html,Css,Google Sheets,Modal Dialog,谷歌电子表格的showModalDialog是否有替代方案？我愿意学习新软件。什么样的软件对技能不高的教师来说是合理的我在谷歌电子表格中为我的学生制作了一个Connect 4游戏。随机问题是从不同的标签和菜单项，我想一个漂亮的问题显示。showModalDialog和HTML中可能存在维度。我在一个BODY和一个DIV中添加了尺寸标注，或者只在DIV中添加了尺寸标注，这使它变得复杂起来。对话框总是显示一些白色，HTML经常会弹出滚动条（非常难看）。可能需要比谷歌应用程序脚本更强大的东西来创建一

谷歌电子表格的showModalDialog是否有替代方案？我愿意学习新软件。什么样的软件对技能不高的教师来说是合理的

我在谷歌电子表格中为我的学生制作了一个Connect 4游戏。随机问题是从不同的标签和菜单项，我想一个漂亮的问题显示。showModalDialog和HTML中可能存在维度。我在一个BODY和一个DIV中添加了尺寸标注，或者只在DIV中添加了尺寸标注，这使它变得复杂起来。对话框总是显示一些白色，HTML经常会弹出滚动条（非常难看）。可能需要比谷歌应用程序脚本更强大的东西来创建一个清晰的问题显示。有人有什么建议吗

这是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中添加边框，它只显示在顶部和左侧。至少在当前维度下，我的最长问题没有滚动条

问题不是垂直对齐的，所以短的问题会出现在绿色区域的顶部。

Google Groups.com上的Alan Wells写道，你无法摆脱对话框边缘的空白。如果你想继续使用谷歌的产品，并且想要一个替代方案，你需要为你的应用程序使用一个应用程序脚本Web应用程序

他建议用一个网络应用程序来创建问题框，而不是从工作表上的菜单中触发

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

我终于找到了在html的所有边上添加边框的方法。将边框放在父项中会使其显示在顶部和左侧。将其放在子对象中会使其显示在顶部、底部和左侧。底部的边界在绿色广场的中间，而不是在底部。< /P> 诀窍是将父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;
       }


#母公司{
背景色：#99ec46；
显示：表格；
字体系列：乔治亚、坎布里亚、泰晤士报、新罗马、泰晤士报、衬线；
字体大小：100%；
身高：97%；
保证金：自动；
填充：0；
位置：固定；
文本对齐：居中；
宽度：97%；
}
#孩子{
边框：5px实心#58a30d；
边界半径：10px；
显示：表格单元格；
填充：55px 55px；
垂直对齐：中间对齐；
}

还要感谢谷歌集团的克拉克·林德建议使用幻灯片而不是电子表格。幻灯片也仅限于使用showModalDialog显示html。

您能提供您的html对话框脚本和您的意思的可视化示例吗？完成-@Rafa Guillermo-不知道如果我不发表评论，您是否会知道发生了这种情况？

<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;
       }