Twitter bootstrap 如何从引导中重用模式html？

我有一些不同的模态对话框，包含不同的内容。基本上，单击按钮1显示modaldialog1…单击按钮2显示modaldialog2，等等

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

按钮1点击的基本代码和modalDialog1的支持代码：

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

用于显示模态的HTML…我如何在JavaScript函数内或以其他方式重用此代码，并为模态头和包含模态内容的ClassID传入一些变量，以便模态可以重用

不确定这是否可以应用到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> 

×
模态头
接近
保存更改

您可以通过javascript显示模式：

     <script type="text/javascript">
        function launchModal() {
            $("#myModal").html($("#modalTemplate").html()).modal();

        }

    </script>

    <a href="javascript:launchModal()" role="button" class="btn" >Launch demo modal</a>

    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-    labelledby="myModalLabel" aria-hidden="true">

   </div> 

   <div id="modalTemplate" style="display:none">
      <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>

函数launchModal（）{
$（“#myModal”）.html（$（“#modalTemplate”）.html（））.modal（）；
}
×
模态头
接近
保存更改

试试这个

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

启动演示模式1
启动演示模式2
×
模态头
接近
保存更改
函数showmodel（标题，contentClassID）{
$（'#myModalLabel'）.html（标题）；
$（“#容器”）.removeAttr（'class'）；//如果存在alredy，则将其删除
$（'#container'）.addClass（contentClassID）；
$（'myModal'）.modal（'show'）；
}

我知道这是一个旧线程，但是是的，在这里你可以得到Bootstrap 3.x的解决方案。

非常酷！如何将html和ShowModal都包装到一个.js文件或其他文件中，以便从任何html文件中导入我使用的每个模式？

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