Question

So I am creating a help page that contains instructions on setting up email with Outlook. I am going to have 3 sets of instructions for the different versions of Outlook 2010, 2007 and 2003. Off to the side of the various steps I have a link “Screenshot” which will open a screenshot of that particular step using bootstraps modal window.

<a href="#ss-outlook2010-1" role="button" data-toggle="modal">Screenshot</a>

Here is my question: Is there a way to dynamically create or recycle the modal div? The only thing that changes is the main div id and the img src. Otherwise I will end up with 30 divs that are pretty much the same. Thanks in advance!

<div id="ss-outlook2010-1" class="modal large hide fade" tabindex="-1" role="dialog" aria-labelledby="Outlook 2010" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Outlook 2010</h3>
  </div>
  <div class="modal-body">
    <a><img src="images/screenshots/ss-outlook2010-1.png" title="Outlook 2010" alt="Outlook 2010"></a>
  </div>
</div>

Answer 1

Why not:

<div id="ss-outlook" class="modal large hide fade" tabindex="-1" role="dialog" aria-labelledby="Outlook 2010" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Outlook 2010</h3>
  </div>
  <div class="modal-body">
    <div id="outlook-2003" style="display: none;">

    </div>
    <div id="outlook-2007" style="display: none;">

    </div>
    <div id="outlook-2010" style="display: none;">

    </div>
    <div id="outlook-2012" style="display: none;">

    </div>
  </div>
</div>

Then use JavaScript to decide which of the Outlooks you show:

$('#outlook-2012').show();