在bootstrap模式中自定义Google搜索,以相同的模式打开结果

时间:2016-11-06 19:44:23

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

我有这个模态窗口:

.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加载脚本,结果也始终打开单独的模态。

应该注意的是,模态包含在div中以淡入淡出:

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

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

2 个答案:

答案 0 :(得分:1)

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

Goolge CSE look and feel and layout

答案 1 :(得分:0)

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

希望这会让一些人感到头疼。