如何在bootstrap中通過按鈕模式中的屬性傳遞數據

Question

我在下面有一個引導代碼。點擊按鈕時，模式顯示正確。

<a href="#" class="btn" data-toggle="modal" data-target=".bs-example-modal-lg"> 

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
<div class="modal-dialog modal-lg" role="document"> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <h4 class="modal-title"><i class="glyphicon glyphicon-bell"></i>&nbsp; New Message</h4> 
    </div>  
    <div class="modal-body"> 
    <!-- data should be displayed here when an href button is clicked --> 
    </div> 
</div> 

現在，我想從a按鈕標籤傳遞數據的modal body內顯示。我需要的是在a標籤內附加一個屬性，如data-content，當它被點擊時，它將顯示在模態體內。

但是，我不知道如何。

請幫忙。感謝

Answer 1

確保你在你的HTML頭擁有jQuery的。如果不補充一點：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

你的HTML應該是這個樣子：（我改變了類的一個元素來我-BTN可自由將其更改爲任何你喜歡的。）

<a href="#" class="my-btn" data-toggle="modal" data-target=".bs-example-modal-lg" 
    data-content="hello">Test Btn</a> 

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" 
    aria-labelledby="myLargeModalLabel"> 
    <div class="modal-dialog modal-lg" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h4 class="modal-title"><i class="glyphicon glyphicon-bell"></i>&nbsp; New Message</h4> 
     </div> 
     <div class="modal-body"> 
     <!-- data should be displayed here when an href button is clicked --> 
     </div> 
    </div> 
    </div> 
</div> 

JavaScript代碼應該是這個樣子：

$(document).ready(function() { 
     $('.my-btn').click(function() { 
     var myDataValue = $(this).data('content'); 
     $('.modal-body').text(myDataValue); 
     }) 
    }); 

希望這有助於！

Answer 2

你已經擁有你的答案我的朋友數據 - 標籤會做的伎倆嘗試像

<a href="#" class="btn" data-myVal="My sample Value" data-toggle="modal" data-target=".bs-example-modal-lg"> 

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
<div class="modal-dialog modal-lg" role="document"> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <h4 class="modal-title"><i class="glyphicon glyphicon-bell"></i>&nbsp; New Message</h4> 
    </div>  
    <div class="modal-body"> 
    <!-- data should be displayed here when an href button is clicked --> 
    </div> 
</div> 

，並在劇本方面的東西

<script> 
$(function() 
{ 
$('.btn').on('click',function(){ 
$('.modal-body').html($('.btn').data('myVal')); 
}) 
}) 
</script> 

Answer 3

試試這一個傢伙。

$(document).ready(function(){ 
 
    $("#modalButton").click(function(){ 
 
     var value = $(this).data("content"); 
 
     $("#modal-input").val(value); 
 
     
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
                   <!-- look at the data-value.. --> 
 
<div class="text-center"> 
 
<br><br> 
 
<a href="#" class="btn btn-primary " data-toggle="modal" data-target=".bs-example-modal-lg" data-content="Your Content" id="modalButton">Click here</a> 
 
</div> 
 
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModal"> 
 
<div class="modal-dialog modal-lg" role="document"> 
 
<div class="modal-content"> 
 
    <div class="modal-header"> 
 
    <h4 class="modal-title">&nbsp; Your Modal</h4> 
 
    </div>  
 
    <div class="modal-body"> 
 
    <input class="form-control" id="modal-input"> 
 
    <!-- data should be displayed here when an href button is clicked --> 
 
    </div> 
 
</div>