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

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

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.