I'm trying to use the modal of Bootstrap
, but I can not make the window open in modal form with the page style, instead it opens as a page with no style and using the whole frame of the browser.
Following page code:
@model MyApplication.ViewModels.MyViewModel
@Ajax.ActionLink("Adicionar Endereço", "Create", "Enderecos", new { area = "Geografia", id = Model.Id },
new AjaxOptions() {
HttpMethod = "Get",
UpdateTargetId = "modalContent",
InsertionMode = InsertionMode.Replace,
OnBegin = "onBegin",
OnSuccess = "onSuccess",
OnFailure = "onFailure",
OnComplete = "onComplete" },
new { id = "btnEndereco", @class = "btn btn-lg btn-info" }
)
<a href='@Url.Action("Create", "Enderecos", new { area = "Geografia", id = Model.Id})' class="btn btn-success btn-xs">Adicionar Endereço</a>
<table id="enderecosJson">
<thead>
<tr>
<th>CEP</th>
<th>Rua</th>
<th>Numero</th>
<th>Complemento</th>
<th>Bairro</th>
<th>Estado</th>
<th>Cidade</th>
<th></th>
<th></th>
</tr>
</thead>
</table>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" id="modalContent">
</div>
</div>
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
function onBegin() {
//alert('begin');
}
function onSuccess() {
//alert('success');
}
function onComplete() {
// alert('complete');
$('#myModal').modal('show');
}
function onFailure() {
alert('fail');
}
</script>
}
The screen looks like this:
Can someone give me a light where I might be wrong?