Clash Royale CLAN TAG#URR8PPP

Set modal title

I have my modal:

<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>


I have my button:

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


And after click the button I use the class "call-modal":

$('.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');
);


I can load the content but I would like to set the Title using the data-title.

Any idea why it is not working?

Thank you

4 Answers
4

You can do like this:

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


and your button:

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


fiddle:

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

You can set the title once the modal is shown,

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


You can set the title:

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


$('#modal-title').text('Any title you want!');

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.