如何使 html 表单出现在另一个 html 页面顶部的框中答案

【问题标题】：How do I make an html form appear in a box on top of another html page如何使 html 表单出现在另一个 html 页面顶部的框中
【发布时间】：2016-06-03 23:56:19
【问题描述】：

所以我目前正在使用谷歌选择器，一旦用户选择了正确的文件，我希望在选择器顶部出现一个小得多的 html 框。

 // A simple callback implementation.
function pickerCallback(data) {
  if (data.action == google.picker.Action.PICKED) {
    var fileId = data.docs[0].id;
    window.document.location.href = 'metadata.html';
 }
}

显然最后一行是错误的，我只是在测试。问题是一旦执行操作，选择器就会消失，我不知道如何格式化 html 以使其显示为较小的窗口，我认为它是一个容器，但我不知道。为什么我不知道如何解决它是有道理的。我想提一下，另一个html在一个单独的文件中，看起来像这样。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <img src="https://www.artusmode.com/wp-     content/uploads/2014/06/geotabC7EC4363A3736759998B3CE5.jpg" alt="Geotab Logo" style="width:250px; height:75px; position: relative; bottom: 9px; left: 70px;">
  </head>
  <body>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css">

<script>
//When the metadata has been successfully saved as document properties
//  close the metadata form panel

function onSave() {google.script.host.close()}
</script>

<div>
Department ID: <select id = "drop" style="margin-bottom: 0.25cm;">
  <option value="#001">#001---Law</option>
  <option value="#002">#002---Sales</option>
  <option value="#003">#003---Tech</option>
</select>
<input
  type="button"
  style="position:relative; left:60px;"
  id="set_dep"
   value="Set Department"
   onclick="     google.script.run.description(document.getElementById('drop').value)"
  />
</div>

<div style="overflow: hidden; padding-right: .5em;">
Date:<input type="text" id = "date" style="margin-left: 60px; margin-bottom: 0.25cm;"/>
 <input
  type="button"
  id="set_date"
  value="Set Date"
  onclick="   google.script.run.submitDates(document.getElementById('date').value)"
  />
</div>

<div>
Additional Tag: <input type="text" id="metadata" style="overflow: hidden;  padding-right: .5em; margin-bottom: 0.25cm;" onkeydown="if(event.keyCode == 13) document.getElementById('set_tag').click();"/>
<input
    type="button"
    id="set_tag"
    value="Set Tag"
     onclick="google.script.run.submitDates(document.getElementById('metadata').value    ); clearFields();"
    />

  <input
    type="button"
    value="Close"
    onclick="google.script.host.close()"
   />
  <input
  type="button"
  value="Clear"
  onclick="google.script.run.clear()"
  />

 </div>

<script type="text/javascript">
function clearFields() {
    document.getElementById("metadata").value="";
}
</script>

<script>
    $("#date").datepicker({
     showWeek: true,
     firstDay: 0,
     });
</script>

  </body>
</html>

基本上我只是希望它显示为一个可以接收用户信息的小弹出窗口。忽略这些方法，因为它们很好并且用于以前的项目。我确信这非常明显，但我不习惯使用 Javascript。

谢谢大家。

【问题讨论】：

为什么不使用模态？例如。 Bootstrap
你说我只是看着他们很有趣。因此，假设我将 javascript 的第一部分放在那里。当 if 语句发生时，我将如何让模态出现。我已经看到了大量的 onClick 示例，但我无法访问选择器按钮。我只知道当这两个事件匹配时它被选中
我在任何地方都看不到 if 语句。您能否说明需要在何处/何时打开模式？
function pickerCallback(data) { if (data.action == google.picker.Action.PICKED) { var fileId = data.docs[0].id; } }

标签： javascript html google-picker

【解决方案1】：

使用 JQuery 打开 Bootstrap 模式可以通过以下方式完成

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

例子

function pickerCallback(data) {
  if (data.action == google.picker.Action.PICKED) {
    var fileId = data.docs[0].id;
    $('#myModal').modal('show')
 }
}

Source

【讨论】：