Когда я нажимаю кнопку CreateTemplate, диалоговое окно отображается без фона, НО заголовок не изменился, почему?

Даже когда я удаляю тег h4 с классом заголовка, заголовок не устанавливается.

  $('#CreateTemplate').click(function (e) {
            e.preventDefault();
            $('#myModal').modal({ backdrop: false, title: "Hello World" });
        });

<button type="button" class="btn btn-default" id="CreateTemplate"><i class="fa fa-plus"></i></button>


   <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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>
                    <h4 class="modal-title" id="myModalLabel">Thats the title</h4>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
1
Pascal 8 Апр 2014 в 13:41

3 ответа

Лучший ответ

Модальный метод не поддерживает параметр «заголовок».

http://getbootstrap.com/javascript/#modals-usage (см. «Параметры» раздел)

1
Hiram Hibbard 8 Апр 2014 в 18:24

Я знаю, что об этом спрашивали давно, но есть способ динамически изменять заголовок заголовка.

Допустим, это ваш модальный html-блок haeder:

 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3 id="myModalLabel">&nbsp;</h3>
  </div>

Тогда вот как вы измените заголовок модального окна в javascript:

 var title = "new title";
 $(".modal-header #myModalLabel").text( title );
5
Erika 9 Июл 2015 в 20:16

Это работает даже с bootstrap 2

//apply additional modal settings to modal
$("a[data-toggle='modal']").on('click', function(e) {
	$_clObj = $(this);
	$_mdlObj = $_clObj.attr('data-target');
	$($_mdlObj).on('shown.bs.modal',{ _clObj: $_clObj }, function (event) {
		   $_clObj = event.data._clObj;
		   if ($_clObj.attr('data-title')!='') //apply modal title from data-title attribute of the clicked element
		   $(this).find('.modal-header h3').text($_clObj.attr('data-title')); 
	});
});
0
SudarP 27 Авг 2015 в 01:02