モーダルをコピーしますが、テキストとイメージを変更してください

Question

私は自分のサイトに多くのモーダルを持っており、テキストとイメージを変更するたびにコードをコピーしてコピーしたくありません（残りのモーダルはすべて同じです）誰かが私がそれを達成するのを手伝ってくれたら幸いです！

ので、私は毎回コピーしたいのですが、このmodaleTemplateを持っている、そして私は、次の変更したい：

-modalImage1
-modalImage2
-modalImage3

-modalTitle
-modalText

<!-----------------> 
    <!--- PROJECTS 1 --> 
    <!-----------------> 
    <section class="section-full"> 
     <div class="container-full"> 

      <div class="portfolio logo" data-toggle="modal" data-target="#modalProject-1" id="project-1"> 
       <div class="portfolio-wrapper">    
        <img src="img/portfolio/logo/5.jpg"/> 
       </div> 
      </div>    

     </div> 
    </section> 


    <!-------------------> 
    <!-------- MODAL 1 --> 
    <!-------------------> 

    <!-- Modal Project Template --> 
    <div class="modal fade" id="modalProject-1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <!--modal body--> 
       <div class="modal-body"> 
        <div class="container-fluid"> 
         <div class="row"> 

          <!--modal image--> 
          <div class="col-sm-6"> 
           <img id="modalImage1"/> 
           <img id="modalImage2"/> 
           <img id="modalImage3"/> 
          </div> 
          <!--modal text--> 
          <div class="col-sm-6"> 
           <h2 id="modalTitle"></h2> 
           <p id="modalText"></p> 
          </div> 

         </div> 
        </div> 
       </div><!--modal body--> 
      </div><!--modal-content--> 
     </div><!--modal-dialog--> 
    </div> 

    <!---------------------> 
    <!-- modal project 1 --> 
    <!---------------------> 
    <script> 
    $('#project-1').click(function(){ 
     function setModal(modalImage1, modalImage2, modalImage3, modalTitle, modalText){ 
      $('#modalImage1').attr('src','img/portfolio/logo/1.jpg'); 
      $('#modalImage2').attr('src','img/portfolio/logo/2.jpg'); 
      $('#modalImage3').attr('src','img/portfolio/logo/3.jpg'); 
      $('#modalTitle').text('some title'); 
      $('#modalText').text('some text'); 
     }; 
    }); 
    </script> 

Answer 1

jQuery（またはvanilla javascript）を使用してモーダルを開くときのDOMの値。 openイベントで値を設定する要素に、modal give id（またはクラス）に配置した<script>タグを削除します。 jQueryでイメージのsrcを変更するには、$('#ID-of-img').attr('src','path-here');を使用できます。 jQueryのヘッダーまたは段落（または何でも）のテキストを変更するには、$('#ID-of-element').text('place text here');を使用します。

あなたの場合、私はこのようなものを使用します。

 <div class="col-sm-6"> 
      <div class="spacer-sm hidden-sm-up"></div> 
      <h2 id="modalTitleDef"></h2> 
      <p><span id="modalText1Def"></span><br><br><span id="modalText2Def"></span></p> 
      <br> 
      <button type="button" class="btn btn-primary btn-md" data-dismiss="modal">Close Project</button> 
     </div> 
    </div> 

</div>  

<!-- project1 = COPY ALL modalTemplate but CHANGE the images and text--> 
<script> 

    function setModal(modalImage1Def, modalImage2Def, modalImage3Def, modalTitle, modalText1, modalText2){ 
     $('#modalImage1Def').attr('src',modalImage1Def); 
     $('#modalImage2Def').attr('src',modalImage2Def); 
     $('#modalImage3Def').attr('src',modalImage3Def); 
     $('#modalTitleDef').text(modalTitle); 
     $('#modalText1Def').text(modalText1); 
     $('#modalText2Def').text(modalText2); 
    } 

</script> 

Answer 2

それはあなたが実現しているよりもずっと簡単です。

特に優れたブートストラップモーダルを使用する場合、モーダルは最初は隠されて表示されるDIV構造に過ぎません。 position:absoluteまたはposition:fixedを使用してスタイルを設定してページの上に置き、それをその神秘に追加します。しかし、単純なDIV構造に過ぎません。

したがって、通常のdivの内容をプログラムでどのように変更しますか？通常、jQuery .html()を使用します。これは、1つのモーダル構造を持ち、必要に応じてコンテンツを変更する方法です。

通常、ページには1つのモーダル構造のみが必要です。情報をモーダルに表示するたびに、その構造の内容を変更して更新されたモーダルを再表示します。

例：

$('#changeit').click(function(){ 
 
    $('.modal-header').html('New header title'); 
 
    $('.modal-body').html('\ 
 
     <div class="col-xs-4">\ 
 
     <img src="http://placeimg.com/200/150/animals" >\ 
 
     </div>\ 
 
     <div class="col-xs-8">\ 
 
     Here is some new content. Here is some new content. Here is some new content. Here is some new content. Here is some new content. Here is some new content. Here is some new content. \ 
 
     </div>'); 
 
    alert('Modal has been changed. Click OPEN MODAL again to see'); 
 
    //$('#btnOpenModal').click(); //This will force re-open the modal, if desired 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<!-- Trigger the modal with a button --> 
 
<button id="btnOpenModal" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 

 
<!-- Simple Modal, from http://www.w3schools.com/bootstrap/bootstrap_modal.asp --> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div> 
 

 
<button id="changeit">Change Modal Contents</button>

Answer 3

あなたの状況は、テンプレートを使用するための正確な例であり、あなたには、いくつかのHTMLを持って変更するためのさまざまな場所や変数でレンダリングする必要があり、JavaScript templates

をご確認ください