在引导模式下自定义Google搜索，在相同模式下打开结果

Question

I have this modal 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> 

Which is a search window for a Google Custom Search. The search box renders fine, but the results open in a second modal, instead of opening below the search box. How can I force GCSE to open results in the current modal?

So I thought I solved the issue when I saw that removing the script from the html here in this jsFiddle did the trick, however even if I load the script via ScriptManager in my ASP.NET application, the results always open in a separate modal.

It should be noted that the modal is contained in a div to fade it in and out:

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

which I omitted above. Could that make a difference?

Answer 1

I had the same issue, and the I realized that you can customize how it displays, you need to go to your control panel of CSE and in the side bar, below the configuration option, it should be the option of design or layout

Answer 2

Well, apparently I resolved my issue by moving the script out of the modal, which does make sense.

Hopefully this will some some people headaches.