Question

所以我目前正在使用谷歌选择器，一旦用户选择了正确的文件，我想要一个更小的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。

谢谢大家。

Answer 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

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

1 个答案: