How to dynamically run existing HTML content in Bootstrap Modal without modal html for each link?

Question

I read several articles on loading remote content into modal or dynamic materials and read Question # 531 https://github.com/twitter/bootstrap/issues/531 but cannot find what I want, perhaps because I think about the problem is wrong.

I have a list of content, each item shows a different product and some details about it. I want to be able to click the “view details” link for each product and have the same content in modal mode, but use CSS to display some very little additional information (my question may be how to dynamically get different content, but I think that considering how little extra data I need, this is not worth the request).

HTML for list item:

<ul> <li class="span4 product"> <div class="inner"> <img src="xxxxx" alt="Product xxxxx" /> <div class="control-group"> <label class="control-label">Product Type:</label> <span class="field">Really cool product</span> </div> <!-- Small amount of hidden additional information --> <div class="control-group hide"> <label class="control-label">Product ID:</label> <span class="field">123456</span> </div> </div> <a class="details" data-toggle="modal" href="#product-details">View details</a> </li> </ul> 

1 Bootstrap Modal HTML:

 <div id="product-details" class="modal hide fade" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-body"> <!-- Product Detail in here dynamically --> </div> </div> 

When you click on the "details" link, I want the "internal" content to appear in a modal format. There are two questions here:

• There are many elements in this list (I just showed 1), and I want each "details" link to display the details of this product in a modal format.
• I don’t want an additional static modal html code to be loaded as a target for each element, I just want 1 modal, but the content is different depending on which link 'details' is clicked.

I assume that I will need one modal in html, as shown in this question about remote modal dialogs .

This is just the way I am modifying content that I'm not sure about.

EDIT

I found a solution of its kind (but cannot answer my question for several hours).

 $('.product a.details').click(function(){ $(this).parent('.inner').clone().appendTo('#device-modal .modal-body'); $('#product-details').modal(); }); $('#product-details').on('hidden', function(){ $('#product-details .inner').remove(); }); 

It clones the “internal” div of the “product” and adds it to the static modal container when the “details” are present, and then runs the modal code when the link is clicked.

The second part removes this clone if you exit the modal.

Answer 1

I am currently using this as my solution. Remove the tag in html as it does not actually point to the content and does not set the click function directly to the list item.

 $('.product').click(function(){ $(this).find('.inner').clone().appendTo('#device-modal .modal-body'); $('#product-details .modal-body .control-group.hide').show(); $('#product-details').modal(); }); $('#product-details').on('hidden', function(){ $('#product-details .inner').remove(); }); 

It clones the “internal” div of the “product” and adds it to the static modal container when the “details” link is clicked. Then it shows the hidden divs and launches the modal.

The second part removes this clone if you exit the modal.

Then I have some specific CSS styles that target modal content, so it has a different look. Of course, you can add a display: block hidden divs in a modal format, and not use jQuery to show them.

One thing I'm not sure about is whether the actual modal div (# product-details in my case) should be created using jQuery because it is an empty div in html that seems semantically incorrect.