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的值。将已放置在模态给定ID（或类）中的<script>标记移除到您在open事件上设置值的元素。要在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

这比你想象的要简单得多。

特别是在使用优秀的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

复制模态但更改文本和图像

3 个答案: