title: Bootstrap modal window inside another div
body: <p>My bootstrap modal is working fine. 
  My problem is that I need the modal window (including the gray background) to be applied on a div from the website and not on the body.
  I have the following structure:</p>
  
  <pre><code>&lt;div class="bigform-content"&gt;
      &lt;div class="wpcol-one col-md-6"&gt;
          &lt;/div&gt;
      &lt;div class="wpcol-one col-md-6"&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Modal --&gt;
          &lt;div class="modal fade" id="dialog_confirm_map" tabindex="-1" role="dialog" aria-labelledby="dialog_confirm_mapLabel" aria-hidden="true"&gt;
            &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
  
                &lt;div class="modal-body"&gt;
                  &lt;p&gt;You didn't move the map pin, are you sure it is on your address/house?&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="modal-footer"&gt;
                  &lt;span style="float:left"&gt;&lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;No, I'll do it now &lt;/button&gt;&lt;/span&gt;
                  &lt;span style="float:right"&gt;&lt;button type="button" class="btn btn-primary" data-dismiss="modal" onClick="jQuery('#mapchanged').val(1);jQuery('#registration').submit();"&gt;Yes, I am sure&lt;/button&gt;&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;&lt;!-- /.modal-content --&gt;
            &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
          &lt;/div&gt;&lt;!-- /.modal --&gt;
  </code></pre>
  
  <p>Now the modal window is opening correctly but I need to see it on the first div, and the other div to be click able when the modal window is open.</p>
  
  <p>Can you please give me a solution for that?
  Thank you so much,
  Raluca.</p>