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

Bootstrap modal backdrop issue

  • 772

I have a problem when closing a modal, this problem does not always occur, well the detail is that the backdropmodal stays, I attached an image.

Backdrop of the modal

The modal is closed but backdropit remains, the way I am closing it is as follows:

$('#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
    });
});

After submitting the form, it returns a Json with text that if the insertion was validated or otherwise the error, this text is attached to an alert message for which I use Toastr to show them and then close the modal.

As I mentioned above, sometimes it closes correctly and sometimes the backdrop.

I already tried changing the way to close the modal with $('#ModalAgregar').modal('hide');and it still produces the same thing after several tries.

This is how my modal is defined:

<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

    I have fixed this in 2 ways:

    One is to remove the class fadefrom the modal in your <div>main

    And the second is to force the backdrop to be removed after your success handler

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

    By request of the OP and apply the code only if thebackdrop

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

  2. The solution is to place in the button of the action this: data-backdrop="false"anddata-dismiss="modal"

    Example:

    <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>

    Because if you do it as you propose, when you call the modal again, it will not be displayed for you because it was removed.

    • 4