Question

我正在尝试从引导模式中包装.modal-backdrop，以便在通过ajax获取数据时添加加载器。

到目前为止，我将modal-backdrop属性更改为实际的loading.gif，在显示实际模态后，我将类更改为modal-backdrop-bg，因此它仍然具有模态背后的背景。 / p>

这是我的代码。

HTML

var modal_name = "#modal-container";

$(modal_name).on("shown.bs.modal", function() {

  var backdrop = $(".modal-backdrop");

  backdrop.removeClass("modal-backdrop");
  backdrop.addClass("modal-backdrop-bg");

});

.modal-backdrop {
  background-image: url('../../Content/images/spin.gif');
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: transparent;
}

.modal-backdrop-bg {
  background-color: #000;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1040;
}

.modal-backdrop-bg.in {
  filter: alpha(opacity=50);
  opacity: .5;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Jquery library for bootstrap-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="modal-container" class="modal fade hidden-print" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Somedata here -->
    </div>
  </div>
</div>

提前致谢！

在div中包装模态背景

0 个答案: