如何将在不同DIV上运行的模态重构为DRY？

Question

I have about 9 small javascript functions on my page that all do the same thing, open up a modal for the content inside the div where the button is located.

The only difference between them all is that each one references a different div. I'd like to refactor this code so that I'm not repeating any code that does the modal operation.

Here is the codepen :

Javascript:

// FINDS THE MODAL AND THEN PLACES THE IBOX CONTENT THAT IS CURRENTLY
// ACTIVE INSIDE THE MODAL'S BODY

$('[data-target="#enlargeElementModal"]').on('click', function () {
    $('#enlargeElementModal .modal-body').html($('#ibox-1 .content.active').html());
});

$('[data-target="#enlargeStrategyModal"]').on('click', function () {
    $('#enlargeStrategyModal .modal-body').html($('#ibox-2 .content.active').html());
});

....and many more of these

Some HTML:

// IMPORTANT PART OF ENLARGE MODAL
<div class="modal modal-wide fade" id="enlargeElementModal" role="dialog"><!--ENLARGE SCREEN MODAL-->
      <div class="modal-dialog">
             <div class="modal-content">
                     <div class="modal-header">
                           <button type="button" class="close" data-dismiss="modal">
                           <span class="glyphicon glyphicon-remove"></span>
                           </button>
                           <h4 class="modal-title">Element Map</h4>
                     </div>
             <div class="modal-body">
                  <p></p>
             </div>
             <div class="modal-footer">
                   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             </div>
        </div>
   </div>
</div>


// IMPORTANT PART OF IBOX-CONTENT
<div class="ibox-content mapStyle" id="ibox-1"><!--CONTENT INSIDE THE DIV BODY-->
                <div class="active content" id="elementMap"><!--MAP CONTENT-->
                ....content
                </div>
</div>

How do I refactor the modal JavaScript so I don't repeat code?

Answer 1

I would add another data-* attribute onto each button to indicate where the content comes from:

<button type="button" class="btn btn-default btn-xs" data-toggle="modal"
     data-target="#enlargeStrategyModal" data-content="#ibox-2">

And then use this same code to activate every button:

$('[data-target]').on('click',function(){
    var target = $(this).data('target');
    var content = $(this).data('content');
    $(target + ' .modal-body').html($(content + ' .content.active').html());
  });

Live example: http://codepen.io/anon/pen/dojRRZ