4

我有一些包含不同内容的不同模式对话框。基本上，单击 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>
4

3 回答 3

5

尝试这个

<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>
于 2013-07-15T05:23:21.957 回答
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>
于 2013-07-15T05:19:00.753 回答
0

我知道这是一个旧线程，但是这里是Bootstrap 模式：关闭当前，打开新的，您可以获得 Bootstrap 3.x 的解决方案。

于 2017-05-10T14:12:23.347 回答