设置模态标题答案

【问题标题】：Set modal title设置模态标题
【发布时间】：2016-12-17 06:33:38
【问题描述】：

我有我的模态：

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

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

知道为什么它不起作用吗？

谢谢

【问题讨论】：

Not having an issue

标签： jquery bootstrap-modal

【解决方案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/

【讨论】：

【解决方案2】：

一旦显示模态，您就可以设置标题，

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

【讨论】：

【解决方案3】：

你可以设置标题：

$("#defaultModal").dialog("option","title", "You new title");

【讨论】：

好吧。也许你可以在某个时候。但这肯定不会一直有效。

【解决方案4】：

$('#modal-title').text('任何你想要的标题！');

【讨论】：