twitter-bootstrap - 如何从 Bootstrap 重用模态 html？

Question

我有一些包含不同内容的不同模式对话框。基本上，单击 button1 显示 modaldialog1 ...单击 button2 显示 modaldialog2 等。

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

button1 点击的基本代码和modalDialog1的支持代码:

按钮代码(用于点击显示模态)

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

用于显示模态的 HTML...如何在 JavaScript 函数或其他方式中重用此代码，并为 Modal Header 和 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>