设置模式标题

Question

我有我的模式：

<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'); 
}); 

我可以加载内容，但我想使用数据标题来设置标题。

任何想法为什么它不工作？

谢谢

Answer 1

你可以这样做：

$('#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/

Answer 2

您可以在显示模式后设置标题，

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