如何使HTML表单显示在另一个HTML页面顶部的框中

Question

So I am currently using google picker, and once the user selects the proper file I want a much smaller html box to appear on top of the picker. 所以我目前正在使用Google Picker，一旦用户选择了正确的文件，我希望在选择器顶部出现一个更小的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';
 }
}

Obviously the last line is wrong I was just testing. 显然，最后一行是我刚刚测试的错误。 The issue's that the picker is disappearing once the action is performed and I don't know how to format the html to make it appear as a smaller window, i think its a container but I dont know. 问题是，一旦执行操作，选择器就会消失，我不知道如何格式化html以使其显示为较小的窗口，我认为它是一个容器，但我不知道。 It makes sense as to why I just don't know a way around it. 为什么我只是不知道如何解决它，这很有意义。 I want to mention that the other html is in a separate file and looks like this. 我想提一下，其他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>

Basically i just want this to appear as a little pop-up that can receive users information. 基本上，我只希望它显示为可以接收用户信息的小弹出窗口。 Ignore the methods as those are fine and were used for a previous project. 可以忽略这些方法，因为它们是很好的方法，并且已用于先前的项目。 I'm sure it's super obvious but im not used to working with Javascript. 我确信它非常明显，但我不习惯使用Javascript。

Thanks everyone. 感谢大家。

Answer 1

Opening a Bootstrap modal with JQuery can be done with the following 可以使用以下方法打开带有JQuery的Bootstrap模态

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

Example 例

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

Source 资源

如何使HTML表单显示在另一个HTML页面顶部的框中

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-06-03 15:56:19

如何使HTML表单显示在另一个HTML页面顶部的框中

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-06-03 15:56:19

解决方案1
2 已采纳 2016-06-03 15:56:19