javascript - Load a page fragment into a Twitter bootstrap Modal - Stack Overflow

admin管理员组

文章数量:1297015

Is it possible to load a page fragment using Twitter bootstrap's modal ponents? 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?

Is it possible to load a page fragment using Twitter bootstrap's modal ponents? 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?

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow asked Aug 28, 2012 at 20:38 Michael MulichMichael Mulich 1,2821414 silver badges2222 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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>

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

Declaring the fragment id using data-remote worked for me:

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

本文标签： javascriptLoad a page fragment into a Twitter bootstrap ModalStack Overflow