Home / Questions / 11201
Accepted
JuankGlezz
Asked: 2020-05-28 12:09:19 +0800 CST 2020-05-28 12:09:19 +0800 CST

Проблема с модальным фоном Bootstrap

  • 772

У меня проблема при закрытии модала, эта проблема возникает не всегда, ну деталь в том что backdropмодал остается, картинку прикрепил.

Фон модального окна

Модальное окно закрыто, но backdropоно остается, я закрываю его следующим образом:

$('#Agregar').formValidation({
    opciones..
}).on('success.form.fv', function (e) {
    // Prevent form submission
    e.preventDefault();

    $.ajax({
        type: "POST",
        url: "/VistaPopUp/modalAgregar",
        data: $("#Agregar").serialize(),
        dataType: "json",
        success: function (data) {
            Exito(data);
            $('#ModalAgregar').modal('hide');
        },//mostramos el mensaje de error o exito dependiendo del caso
        error: Error1
    });
});

После отправки формы она возвращает Json с текстом, что, если вставка была подтверждена или в противном случае произошла ошибка, этот текст прикрепляется к предупреждающему сообщению, для которого я использую Toastr , чтобы показать их, а затем закрыть модальное окно.

Как я упоминал выше, иногда он закрывается правильно, а иногда файл backdrop.

Я уже пытался изменить способ закрытия модального окна $('#ModalAgregar').modal('hide');, и после нескольких попыток он все равно выдает одно и то же.

Вот как определяется мой модальный:

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close fui-cross" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title text-primary">Agregar Cita</h4>
      </div>
      <form class="form-horizontal" id="Agregar" role="form" style="margin-bottom: 0px;">
        <input name="Tipo" type="hidden" id="Tipo" />
        <div class="modal-body">
          <div class="form-group">
            <div class="col-sm-12">
              <input id="titulo" name="Descripcion" type="text" class="form-control" placeholder="*Título:" style="border: none; width: 100%;" required />
            </div>
          </div>
          <hr style="margin: 5px; border-top: 2px solid #e1ebe9" />
          <div class="form-group">
            <div class="col-sm-12">
              <textarea name="Notas_Inicio" placeholder="Notas:" class="form-control" rows="2" style="border: none; resize: none;" onkeypress="return hashtag(event);"></textarea>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <label class="text-primary" style="float: left;">*Datos requeridos</label>
          <button type="submit" class="btn btn-primary btn-sm">Guardar</button>
        </div>
      </form>
    </div>
  </div>
</div>
jquery

2 Answers

  1. Best Answer

    Я исправил это двумя способами:

    Один из них — удалить класс fadeиз модального окна вашего <div>основного окна .

    И второе — принудительно удалить фон после вашего обработчика успеха

    $('body').removeClass('modal-open');
$('.modal-backdrop').remove();

    По запросу ОП и применять код только в том случае, еслиbackdrop

    ...
$('#ModalAgregar').modal('hide');
if ($('.modal-backdrop').is(':visible')) {
  $('body').removeClass('modal-open'); 
  $('.modal-backdrop').remove(); 
};
...
    • 11

  2. Решение состоит в том, чтобы поместить в кнопку действия это: data-backdrop="false"иdata-dismiss="modal"

    Пример:

    <button type="button" class="btn btn-default" data-dismiss="modal">Done</button>

<button type="button" class="btn btn-danger danger" data-dismiss="modal" data-backdrop="false">Action</button>

    Потому что, если вы сделаете это, как вы предлагаете, когда вы снова вызовете модальное окно, оно не будет отображаться для вас, потому что оно было удалено.

    • 4