2016-12-17 56 views
1

我有我的模式:設置模式標題

<div id="defaultModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h3 class="modal-title" id="modal-title">Modal Title</h3> 
      </div> 
      <div class="modal-body" data-table="table" data-id=""> 
      </div> 
     </div> 
    </div> 
</div> 

我有我的按鈕:

<button href="page.php" data-title="New Data" class='call-modal btn btn-success' > 
    <i class="glyphicon glyphicon-plus"></i> 
</button> 

及後點擊按鈕,我使用的類 「呼叫模式」:

$('.call-modal').on('click', function(e){ 
    e.preventDefault(); 
    $('#defaultModal') 
    .find('.modal-header > h3').text("Teste").end()    
    .find('.modal-body').load($(this).attr('href')).end()    
    .modal('show'); 
}); 

我可以加載內容,但我想使用數據標題來設置標題。

任何想法爲什麼它不工作?

謝謝

+1

[沒有問題](http://www.bootply.com/aFodNF1hWI) – Jhecht

回答

3

你可以這樣做:

$('#defaultModal').on('show.bs.modal', function (event) { 
    var button = $(event.relatedTarget); // Button that triggered the modal 
    var modal  = $(this); 
    var title = button.data('title'); alert(title); 
    modal.find('.modal-title').text(title) 
}); 

和你的按鈕:

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#defaultModal" data-title="New Data" ><i class="glyphicon glyphicon-plus"></i></button> 

小提琴:

http://jsfiddle.net/bhumi/hw154nda/1/

0

您可以在顯示模式後設置標題,

$('#defaultModal').on('show.bs.modal', function (event) { 
    $(this).find('h3#modal-title').text("You new title"); 
});