7 votes

Problem with the bootstrap modal backdrop

I have a problem when closing a modal, this problem is not always the case, well the detail that is the backdrop of the modal I attached image.

Backdrop del modal

Closes the modal but the backdrop remains, to form in that what I am closing 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 you submit the form I return a Json with a text that if it is valid the insertion or otherwise of the error, this text was attached to an alert message for which I use Toastr the show and after I close the modal.

As I mentioned above sometimes it closes properly and sometimes it is the backdrop.

Already try changing the way of closing the modal with $('#ModalAgregar').modal('hide'); and still producing the same thing after several attempts.

So this defined my modal:

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

10voto

rojobo Points 233

I have fixed this in 2 ways:

One is to remove the class fade of 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 PO and apply the code only if the backdrop remained visible

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

3voto

Kevin Rodriguez Points 31

The solution is to place in the action button this: data-backdrop="false" and data-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 plan, when you call the modal again, it will not be displayed because it was removed.

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X