我有这个模态窗口:
.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">×</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">
我在上面省略了。这会有所作为吗?
答案 0 :(得分:1)
我遇到了同样的问题,并且我意识到您可以自定义其显示方式,需要转到CSE的控制面板,并在侧边栏中的配置选项下方,它应该是设计选项,也可以是布局
答案 1 :(得分:0)
好吧,显然我通过将脚本移出模态解决了我的问题,这确实很有意义。
希望这会让一些人感到头疼。