Wie öffne ich das gleiche Modal mit zwei verschiedenen Links mit unterschiedlichem Verhalten?

Question

Ich habe ein Modal, das zwei divs enthält. Jetzt bin ich bereit, das gleiche modale mit zwei verschiedenen Verbindungen zu öffnen.

Hier ist mein modal:

<!-- Modal --> 
<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"> 
     <%= link_to "Back","#",class: "btn btn-default",id: "Back-Link",style: "display:none"%> 
     <%= link_to "Next","#",class: "btn btn-default",id: "Next-Link"%> 
     <div id="One"> 
      <p>Some text in the modal.</p> 
     </div> 
     <div id="Two" style="display:none"> 
      <p>Modal Two.</p> 
     </div> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

    </div> 
</div> 

Nach den Links:

<%= link_to "Test","#", 'data-toggle': "modal", 'data-target': "#myModal"%> 
<%= link_to "Test1","#", 'data-toggle': "modal", 'data-target': "#myModal"%> 

Wenn ich auf "Test" klicken Sie auf den modalen Link sollte mit div id "One" öffnen. Und wenn ich auf "Test1" klicke, sollte das Modal mit div id "Two" geöffnet werden.

kann mir jemand helfen? Vielen Dank im Voraus

Answer 1

Hier ist eine funktionierende fiddle.

Ich verwendete die Datenattribute, um ID von div zu speichern, um innerhalb des Modales zu zeigen. Dann, auf einen Klick, änderte ich seinen Stil von display:none zu block.

<div class="modal-body"> 
    <div id="one" class="hide_first"> 
    <p>Some text in the modal.</p> 
    </div> 
    <div id="two" class="hide_first"> 
    <p>Modal Two.</p> 
    </div> 
</div> 



<a href="#" class="modal-open-links" data-toggle="modal" data-modal-show="one" data-target="#myModal">Open #One</a> 
<a href="#" class="modal-open-links" data-toggle="modal" data-modal-show="two" data-target="#myModal">Open #Two</a> 
<!-- Storing the id of divs in data-modal-show --> 

Und einige Javascript schreiben ähnliche

//classes given to our links 
$(".modal-open-links").on("click", function(e){ 

    //First set display:none for all divs 
    $(".hide_first").css("display", "none"); 
    //hide_first class is on both our divs inside modal body that we want to alternatively show 


    content_to_show = $(this).attr("data-modal-show"); 
    //the div id we want to show on modal open 

    //Show the one we clicked 
    $("#" + content_to_show).css("display", "block"); 
});