모달을 복사하지만 텍스트와 이미지를 변경하십시오.

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를 (또는 자바 스크립트 바닐라)를 사용할 수 있습니다 모달을 열 때 DOM의 값. 공개 이벤트에서 값을 설정하는 요소에 모달 제공 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()을 사용합니다. 이것이 하나의 모달 구조를 갖고 원하는대로 내용을 변경하는 방법입니다.

일반적으로 페이지에 하나의 모달 구조 만 있으면되고 모달에 정보를 표시 할 때마다 해당 구조의 내용을 변경하고 업데이트 된 모달을 다시 표시합니다.

예 :

$('#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