Как открыть модальную боковую панель (Bootstrap) внутри другого модала - Asp.net MVC - PullRequest
0 голосов
/ 21 января 2019

У меня есть общее модальное окно, которое идеально подходит для выполнения 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...