自定义 Google 在 bootstrap 模态中搜索，在相同模态中打开结果

Question

我有这个模态 window:

.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>

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

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

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

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

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

Answer 1

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

希望这会让一些人头疼。

Answer 2

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

自定义 Google 在 bootstrap 模态中搜索，在相同模态中打开结果

Custom Google Search in bootstrap modal, open results in same modal

javascript

jquery

twitter-bootstrap

twitter-bootstrap-3

google-custom-search