Question

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

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

按钮1的基本代码单击并支持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>

Answer 2

你可以通过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>

Answer 3

我知道这是一个旧线程，但是在Bootstrap modal: close current, open new，你可以获得Bootstrap 3.x的解决方案。

如何从bootstrap重用modal html？

3 个答案: