Load a page fragment into a Twitter bootstrap Modal

Question

Is it possible to load a page fragment using Twitter bootstrap's modal components? I want to load a page into the modal, but I only want a section of it. For example, I want the form on the page without the wrapping navigation. I've done this type of thing before using jquery tools overlays and jquery's .load function. But the modal stuff doesn't allow for this type of information to be passed in.

Here is some example text I'm working with:

 <a tabindex="-1"
    href="metadata.html"
    id="metadata-link"
    data-target="#modal"
    data-toggle="modal">Metadata</a>

 <div id="modal" class="modal hide fade in" style="display:none;">
   <div class="modal-header">header<a class="close" data-dismiss="modal">x</a></div>
   <div class="modal-body"></div>
   <div class="model-footer">footer</div>
 </div>

 <script>
   $(document).ready(function() {
     $('#metadata-link').modal({show:false});
   });
 </script>

The 'metadata.html' page is a full html document. The contents of this page get loaded into the '.modal-body' element as expected. But the nothing displays...

If I switch the 'metadata.html' page for a page that contains only a 'div' contents, the modal displays.

Does anyone have any idea why this would happen?

Answer 1

You can do it manually:

<script>
$(document).ready(function() {

     $('#metadata-link').click(function(){
       $.ajax(
       {
          url:'url-to-load-page',
          success: function(response){
            //do what ever you want here to extract the part you want
            $('#modal-div-content').html(adapted-response);
            $('#modal').modal('show');
          }
       });
     });
   });
 </script>

Answer 2

bootstrap uses the jquery load method which allows a URL and a fragment selector to be specified:

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

So in my case (adding a musician) i could use a normal link tag like this:

<a href="/musicians/new?editMode  .container form" class="btn pull-right newItem" data-toggle="modal" data-target="#newItemModal" ><i class="icon-plus-sign"></i> Add</a>

Which extracts the form element from the container div and shows it in the newItemModal modal. This approach allows me to re-use the modal for other items

Answer 3

使用data-remote声明片段id对我有用：

<a href="remote.html" data-remote="remote.html #fragment" data-toggle="modal" data-target="#modal">