在引导模式中自定义 Google 搜索，以相同模式打开结果答案

【问题标题】：Custom Google Search in bootstrap modal, open results in same modal在引导模式中自定义 Google 搜索，以相同模式打开结果
【发布时间】：2018-10-30 09:26:12
【问题描述】：

我有这个模态窗口：

.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after,
.gsc-inline-block {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
input.gsc-input,
.gsc-input-box,
.gsc-input-box-hover,
.gsc-input-box-focus,
.gsc-search-button {
  box-sizing: content-box;
  line-height: normal;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!-- Search Modal -->
<div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Search</h4>
    </div>
    <div class="modal-body">
      <script>
          (function() {
              var cx = '008143018313713111535:r1f77umm7kk';
              var gcse = document.createElement('script');
              gcse.type = 'text/javascript';
              gcse.async = true;
              gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
              var s = document.getElementsByTagName('script')[0];
              s.parentNode.insertBefore(gcse, s);
          })();
      </script>
      <gcse:searchbox></gcse:searchbox>

      <hr />

      <gcse:searchresults></gcse:searchresults>

    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>
</div>

这是 Google 自定义搜索的搜索窗口。搜索框呈现良好，但结果以第二个模式打开，而不是在搜索框下方打开。如何强制 GCSE 在当前模态中打开结果？

所以当我看到在这个 jsFiddle 中从 html 中删除脚本时，我认为我解决了这个问题，但是即使我在我的 ASP.NET 应用程序中通过 ScriptManager 加载脚本，结果总是在一个单独的模态。

需要注意的是，modal包含在一个div中可以淡入淡出：

<div id="modalSearch" class="modal fade" role="dialog">

我在上面省略了。这会有所作为吗？

【问题讨论】：

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3 google-custom-search

【解决方案1】：

我遇到了同样的问题，我意识到您可以自定义它的显示方式，您需要转到 CSE 的控制面板和侧边栏中的配置选项下方，它应该是设计选项或布局

【讨论】：

【解决方案2】：

好吧，显然我通过将脚本移出模态来解决了我的问题，这确实很有意义。

希望这会让一些人头疼。

【讨论】：