У меня есть общее модальное окно, которое идеально подходит для выполнения CRUD в моем веб-приложении. Модальный (боковая панель), так что он находится и находится справа от универсального модального окна, но это не правильно. Появление двух модальных окон месклама, и когда я щелкаю без кнопки ЗАКРЫТЬ окна мили, закрывает все. Кто-нибудь знает, как мне помочь?
Универсальный модал:
<div class="modal fade modal-primary" id="modalGenerica" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div id="contentModal">
</div>
</div>
</div>
</div>
Модальная боковая панель:
<div class="example-wrap">
<h4 class="example-title">Sidebar</h4>
<div class="example">
<div class="example-well h-250 example-modal-sidebar">
<img class="center" src="../../assets/examples/images/modal/modal-position-sidebar.png"
alt="...">
</div>
<button class="btn btn-primary" data-target="#modalSidebar" data-toggle="modal"
type="button">Generate</button>
<!-- Modal -->
<div class="modal fade" id="modalSidebar" aria-hidden="true" aria-labelledby="examplePositionSidebar"
role="dialog" tabindex="-1">
<div class="modal-dialog modal-simple modal-sidebar modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-block">Save changes</button>
<button type="button" class="btn btn-default btn-block" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
</div>
</div>
JS:
$(document).ready(function () {
$.ajaxSetup({ cache: false });
// busca os elementos do atributo data-modal e os inscreve no evento click
$('a[data-modal]').on('click', function (e) {
iniciarTemporarizador();
// Abre a janela modal com o formulario solicitado
openmodal(this.href);
return false;
});
$('table').on('click', 'a[data-modal]', function (e) {
//Este tratamento personaliza a Modal Excluir
//if (this.id == 'btnExcluir') {
// $(".modal-dialog").addClass("modal-lg");
// $(".modal-dialog").addClass("modal-danger");
//}
iniciarTemporarizador();
openmodal(this.href);
return false;
});
$('#modalGenerica').on('hidden.bs.modal', function () {
$('#contentModal').html('');
});
//Este evento faz com que não seja feito submit da page quando pressionada a tecla Enter
$(document).on('keypress', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
dataTablePrincipalLoad();
});
function openmodal(url) {
// Faz uma requisição get e carrega o formulário na janela modal
$('#contentModal').load(url, function () {
$('#modalGenerica').modal({
keyboard: true
}, 'show');
//Enviar o foco para campo Descrição
//$('#modalGenerica').on('shown.bs.modal', function (event) {
// // $("#txtNomeCompleto").focus();
//});
// Inscreve o evento submit
bindForm(this);
finalizarTemporarizador();
});
}
function bindForm(dialog) {
// Inscreve o formulário na janela modal com o evento submit
$('form', dialog).submit(function (e, i) {
if ($(this).valid() || i) {
// Realiza una requisição ajax
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
// Se a requisição for satisfatória, recarrega a página atual
if (result.success) {
window.location = window.location;
} else {
$('#contentModal').html(result);
bindForm();
}
}
});
return false;
} else {
return false;
}
});
ПРИМЕЧАНИЕ: чтобы вызвать modalSidebar из Generic, я использую кнопку:
<button class="btn btn-primary" data-target="#modalSidebar" data-toggle="modal" type="button">Generate</button>