Problem with the bootstrap modal backdrop

Question

Problem with the bootstrap modal backdrop

Navigation

#1 by (6 votes)
#2 by (3 votes)

4

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

The modal is closed but the backdrop 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 sending 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 I show them and then I close the modal.

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

Now try changing the way to close the modal with $('#ModalAgregar').modal('hide'); and keep producing the same after several attempts.

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 bootstrap

asked by JuankGlezz 27.05.2016 в 22:09

source

2 answers

3

The solution is to place this in the action button: 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 deployed because it was removed.

answered by 21.07.2017 в 06:01

Regular expressions in Bash The query does not work, it does not detect letters

score 6 · Accepted Answer

I have arranged this in 2 ways:

One is to remove the class fade from 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 the backdrop

remained visible

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