title: Targeting a specific div for Bootstrap 3 Modal
body: <p>I've been reading all morning but .. I'm stuck. I'm trying to load a Bootstrap modal with content from another page on my site (same domain). It's kind of working, but the modal loads the whole page, not just the content I need. I need a way of targeting a specific div, so it doesn't load everything.</p>
  
  <p>Some background - The site uses Smarty, and each page is attached to a main layout. So the modal is loading side bar menus etc I don't want. This other page I need content from has Smarty tags that only work on it's own specific page so I'm unable to move the script/content to the same page as the modal script (The tags won't load).</p>
  
  <p>Here's what I have so far;</p>
  
  <p>Button;</p>
  
  <pre><code> &lt;a data-toggle="modal" href="{$file_name}?a=cart&amp;amp;action=new&amp;amp;main_type=listing_edit&amp;amp;listing_id={$listing.id}" data-target="#edit"&gt;&lt;img src="{external file='images/buttons/listing_edit.gif'}" alt="{$messages.509}" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Modal;</p>
  
  <pre><code>  &lt;div class="modal fade in" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
  &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
  
          &lt;div class="modal-header"&gt;
              &lt;h3 class="modal-title"&gt;&lt;i class="fa fa-pencil"&gt;&lt;/i&gt;Edit My Listing&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;p class="page_instructions"&gt;Loading...&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="modal-footer"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>The page the modal gets content from;</p>
  
  <pre><code>&lt;div class="modal-header"&gt;
      &lt;h3 class="modal-title"&gt;&lt;i class="fa fa-pencil"&gt;&lt;/i&gt;{$messages.482}&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
      &lt;p class="page_instructions"&gt;{$messages.483}&lt;/p&gt;
  
      {if $error_msgs.cart_error}
          &lt;div class="field_error_box"&gt;
              {$error_msgs.cart_error}
          &lt;/div&gt;
      {/if}
  
      &lt;div class="center"&gt;
          &lt;ul class="button_list"&gt;
              {foreach from=$choices item=label key=step}
                  &lt;li&gt;
                      &lt;a href="{$nextPage}&amp;amp;doStep={$step}" class="btn-block btn-u btn-brd btn-brd-hover rounded btn-u-blue btn-u-sm margin-bottom-5"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-3"&gt;&lt;i class="fa fa-pencil"&gt;&lt;/i&gt;&lt;/div&gt;
                                  &lt;div class="col-md-6"&gt;&lt;span&gt;{$label}&lt;/span&gt;&lt;/div&gt;
                                  &lt;div class="col-md-3"&gt;&lt;/div&gt;
                              &lt;/div&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                      {/foreach}
                  &lt;/ul&gt;
  
                  &lt;div class="clr"&gt;&lt;br /&gt;&lt;/div&gt;
  
                  &lt;ul class="button_list"&gt;
                      &lt;li&gt;&lt;a href="{$previewUrl}" onclick="window.open(this.href,'previewWindow','scrollbars=yes,status=no,width=800,height=600'); return false;" class="btn-block btn-u btn-brd btn-brd-hover rounded btn-u-orange btn-u-sm margin-bottom-5"&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-md-3"&gt;&lt;i class="fa fa-file-text-o"&gt;&lt;/i&gt;&lt;/div&gt;
                                  &lt;div class="col-md-6"&gt;&lt;span&gt;{$messages.500483}&lt;/span&gt;&lt;/div&gt;
                                  &lt;div class="col-md-3"&gt;&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="{$cart_url}&amp;amp;action=cancel" class="btn-block btn-u btn-brd btn-brd-hover rounded btn-u-red btn-u-sm margin-bottom-5"&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-md-3"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/div&gt;
                                  &lt;div class="col-md-6"&gt;&lt;span&gt;{$messages.500257}&lt;/span&gt;&lt;/div&gt;
                                  &lt;div class="col-md-3"&gt;&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;div class="clr"&gt;&lt;br /&gt;&lt;/div&gt;
              &lt;/div&gt;  
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;ul class="button_list center"&gt;
                  &lt;li&gt;&lt;a href="{$nextPage}&amp;amp;doStep=continue" class="btn-block btn-u btn-brd btn-brd-hover rounded btn-u-green btn-u-sm"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-3"&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt;&lt;/div&gt;
                              &lt;div class="col-md-6"&gt;&lt;span&gt;{$messages.500256}&lt;/span&gt;&lt;/div&gt;
                              &lt;div class="col-md-3"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;div class="clr"&gt;&lt;br /&gt;&lt;/div&gt;
          &lt;/div&gt;
  </code></pre>