如何从引导中重用模式HTML？

Question

我有一些包含不同内容的不同模式对话框。基本上，单击button1显示模式对话框1 ...单击button2显示模式对话框2，依此类推。

如何在JavaScript或其他可重用容器中重用该html代码并将数据传递给一个可重用模态？

button1单击的基本代码和modalDialog1的支持代码：

按钮代码（用于单击以显示模式）

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

用于显示模式的HTML ...如何在JavaScript函数或其他方式中重用此代码，并为模式标题和classIDThatContainstheContentsforModal传递一些变量，以便模式可重复使用？

不知道这是否可以纳入JavaScript或其他方法中。

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal Header</h3>
  </div>
  <div class="modal-body">
    <div id="container" class="classIDThatContainstheContentsforModal">
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div> 

Answer 1

尝试这个

<a class="btn" onclick="ShowModal('My Header 1','My_Class_ID_1')">Launch demo modal 1</a>
<a class="btn" onclick="ShowModal('My Header 2','My_Class_ID_2')">Launch demo modal 2</a>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×</button>
        <h3 id="myModalLabel">
            Modal Header</h3>
    </div>
    <div class="modal-body">
        <div id="container" class="classIDThatContainstheContentsforModal">
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">
            Close</button>
        <button class="btn btn-primary">
            Save changes</button>
    </div>
</div>
<script type="text/javascript">
    function ShowModal(header, contentClassID) {
        $('#myModalLabel').html(header);
        $('#container').removeAttr('class'); //if alredy exists remove it
        $('#container').addClass(contentClassID);
        $('#myModal').modal('show');
    }
</script>