4

さまざまなコンテンツを含むモーダル ダイアログがいくつかあります。基本的に、ボタン1をクリックするとmodaldialog1が表示されます...ボタン2をクリックするとmodaldialog2が表示されます。

JavaScript または他の再利用可能なコンテナー内でその html コードを再利用し、データを 1 つの再利用可能なモーダルに渡すにはどうすればよいですか?

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

3 に答える 3

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 に答える