[英]How to change Bootstrap modal content depending on button click
我需要能夠根據單擊的按鈕更改模式內的內容。
例如,如果單擊按鈕 1,它只會顯示class
“one”的div
,而其他的將保持隱藏。
$('#exampleModalCenter').modal('toggle')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" class="btn" data-toggle="modal" data-target="#exampleModalCenter">one</button> <button type="button" class="btn" data-toggle="modal" data-target="#exampleModalCenter">two</button> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- jQuery library --> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <button type="button" class="btn" data-toggle="modal" data-target="#exampleModalCenter">three</button> <!-- Modal --> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="one">Button one content</div> <div class="two">Button two content</div> <div class="one">Button three content</div> </div> </div> </div> </div>
你可以看看這個教程: https : //getbootstrap.com/docs/3.4/javascript/#modals-related-target
只需將數據屬性添加到您的按鈕:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#yourModal" data-name="one">Open modal for One</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#yourModal" data-name="two">Open modal for Two</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#yourModal" data-name="three">Open modal for Three</button>
當事件發生時,你可以恢復按鈕的屬性並根據它調整行為:
$('#yourModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var recipient = button.data('name'); // Extract info from data-* attributes
// Here, you can change the behavior according to the button clicked :
switch(recipient) {
case 'one':
$('.one').show();
break;
case 'two':
$('.two').show();
break;
// etc...
}
});
你可以訂閱模式的show.bs.modal事件,檢查的價值relatedTarget
事件的屬性,然后顯示/隱藏內部的div基於該目標值
下面舉例。 邏輯:每當您單擊按鈕時,先隱藏所有內容,然后根據您單擊的按鈕顯示特定內容。
參考: https : //getbootstrap.com/docs/3.3/javascript/#modals-related-target
$(".btn").click(function () { $(".parent").children().each(function () { $(this).hide(); }); $(`div.${$(this).attr("id")}`).show(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" /> <!-- jQuery library --> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <button id="one" type="button" class="btn" data-toggle="modal" data-target="#exampleModalCenter" > one </button> <button id="two" type="button" class="btn" data-toggle="modal" data-target="#exampleModalCenter" > two </button> <button id="three" type="button" class="btn" data-toggle="modal" data-target="#exampleModalCenter" > three </button> <!-- Modal --> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" > <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" > <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="parent"> <div class="one">Button one content</div> <div class="two">Button two content</div> <div class="three">Button three content</div> </div> </div> </div> </div> </div>
$(document).on("click",".modal-open",function(){ var button_val = $(this).attr("data-val"); $('#exampleModalCenter').modal('show'); $(".conditional-div").hide(); $("#exampleModalCenter ."+button_val).show(); })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" class="btn modal-open" data-val="one" >one</button> <button type="button" class="btn modal-open" data-val="two" >two</button> <button type="button" class="btn modal-open" data-val="three" >three</button> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- jQuery library --> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <!-- Modal --> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="one conditional-div">Button one content</div> <div class="two conditional-div">Button two content</div> <div class="three conditional-div">Button three content</div> </div> </div> </div> </div>
你可以這樣做 :
$('button.btn-open-modal').on('click', function(){ let targetClass = $(this).attr("target-class"); $("#exampleModalCenter div.modal-body > div").each(function(){ if($(this).hasClass(targetClass)){ $(this).show(); }else { $(this).hide(); } }); $('#exampleModalCenter').modal('toggle'); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- jQuery library --> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <button type="button" class="btn btn-open-modal" target-class="one">one</button> <button type="button" class="btn btn-open-modal" target-class="two">two</button> <button type="button" class="btn btn-open-modal" target-class="three">three</button> <!-- Modal --> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="one">Button one content</div> <div class="two">Button two content</div> <div class="three">Button three content</div> </div> </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.