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();

    应 OP 的要求并仅在以下情况下应用代码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>

    因为如果你按照你的建议去做，当你再次调用 modal 时，它不会为你显示，因为它被删除了。

    • 4