動態更新模態div

Question

因此，我創建了一個幫助頁面，其中包含有關使用Outlook設置電子郵件的說明。我將針對不同版本的Outlook 2010,2007和2003提供3套說明。關於各種步驟，我有一個鏈接「屏幕截圖」，它將使用bootstraps模式窗口打開該特定步驟的屏幕截圖。

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

這是我的問題：有沒有辦法動態創建或回收模態的div？唯一改變的是主要的div id和img src。否則，我最終會得到30個幾乎相同的div。提前致謝！

<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

爲什麼不：

<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> 

然後使用JavaScript來決定您展示其展望的：

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