Скопируйте modal но измените текст и изображения

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 (или ваниль JavaScript), чтобы изменить значения DOM при открытии модального. Удалите теги <script>, которые вы поместили в модуле, передайте id (или класс) элементам, на которые вы установили значение, на открытое событие. Чтобы изменить src изображения в jQuery, вы можете использовать $('#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

Это намного проще, чем вы можете себе представить.

Особенно, если вы используете превосходные модальности Bootstrap, модальная структура представляет собой только структуру 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