bootstrap modal loads html into the CONTENT not BODY - twitter-bootstrap-3

Question

According to this source code from bootstrap 3.1.1:
if (this.options.remote) {
this.$element
.find('.modal-content')
.load(this.options.remote, $.proxy(function () {
this.$element.trigger('loaded.bs.modal')
}, this))
}
the html fragement loaded from server should be put into the modal body NOT content.
$('#myModal').modal({ remote: '#Url.Action("Create","Template")' });
The loaded html is put inside the whole dialog content NOT body!
I can fix that for myself changing the source code...
if (this.options.remote) {
this.$element
.find('.modal-body')
.load(this.options.remote, $.proxy(function () {
this.$element.trigger('loaded.bs.modal')
}, this))
}
But I do not want to modify bootstraps source code !!!
<!-- 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">×</button>
<h4 class="modal-title" id="myModalLabel"></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 -->
Thats the partial html fragment:
<script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
<form action="/Template/Create" method="post"> <p class="editor-label"><label for="Name">Name</label></p>
<p class="editor-field"><input class="text-box single-line" data-val="true" data-val-length="Name must not be longer than 30 chars." data-val-length-max="30" data-val-length-min="1" data-val-remote="This name already exists." data-val-remote-additionalfields="*.Name" data-val-remote-url="/Template/TemplateExists" data-val-required="Name must not be empty" id="Name" name="Name" type="text" value="" /></p>
<p class="editor-field"><span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span></p>
</form>

Answer 1

I dont understand why you so agressive, but obvioulsy that's not stupid, since that's what boostrap is telling you to do.
you have 2 options 1. what you already did:
if (this.options.remote) {
this.$element
.find('.modal-body')
.load(this.options.remote, $.proxy(function () {
this.$element.trigger('loaded.bs.modal')
}, this))
}
the second one, instead of inserting this:
<form action="/Template/Create" method="post">
<p class="editor-label"><label for="Name">Name</label></p>
<p class="editor-field"><input class="text-box single-line" data-val="true" data-val-length="Name must not be longer than 30 chars." data-val-length-max="30" data-val-length-min="1" data-val-remote="This name already exists." data-val-remote-additionalfields="*.Name" data-val-remote-url="/Template/TemplateExists" data-val-required="Name must not be empty" id="Name" name="Name" type="text" value="" /></p>
<p class="editor-field"><span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span></p>
</form>
you can just insert this (that's what bs script is wating for)
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<form><!--your form here!--></form>
</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>
hope it helps!

Answer 2

Had the same issue just now. I forgot to include some bootstrap js files. If anyone will have the same issue, here are scripts which fixed this problem for me:
<script type="text/javascript" src="bootstrap-modal/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="bootstrap-modal/js/bootstrap-modalmanager.js"></script>