html - 在 DIV/Form 上 Bootstrap 居中处理模式

Question

请看这个:http://bootsnipp.com/snippets/featured/centered-processing-modal

这是一个让用户知道后端正在发生某些事情的模态，所以请稍候。在 Bootstrap3 中，我如何才能只在一个表单/div 而不是整个页面上使用它？

感谢帮助

Answer 1

按照他们的做法去做，您可以使用 chrome 检查器，但我会为您描述该技术。

1) 在容器内创建一个 div(或您想要的任何元素，只要它不是您将其显示更改为 block 的 block 元素)，在本例中是您的表单或包含该表单的 div。

2) 将该容器的位置设置为relative，将模态位置设置为absolute，如果不将父位置设置为relative，模态将是相对于 body 标签。

3) 为您的模态设置一个固定的宽度和高度，假设两者都为 200px，然后为 50% 的模态添加一个 top 和一个 left 属性，这将使您的元素居中于顶部-左 Angular 相对于它的父元素，因为你想要元素的中心在中间而不是 Angular ，你需要做一个偏移调整，通过向上和向左移动它的一半大小，为此你将使用 margin -top: -100px; 和 margin-left:-100px; 是 widht/2 和 height/2 的负数

您的 html 应该如下所示:

<div class="container">
 <!-- your form here -->
 <div class="custom-modal">
   <!-- loading gif here -->
 </div>
</div>

下面是您的 css 应该是这样的:

.container{
  position:relative; 
}
.custom-modal {
 width: 200px!important; /* Use !important in case you want to override another val*/
 height: 200px;
 position: absolute; /*You can use fixed too*/
 top: 50%;
 left: 50%;
 margin-top: -100px;
 margin-left: -100px;
 display:none; /* You want it to be hidden, and show it using jquery*/
}

现在，您应该将它设置为隐藏，当您发出 ajax 请求时，您可以使用 javascript 设置它的可见性。

---

Jquery 例子

// Store your modal object in a variable

var $myModal = $('.custom-modal');

// On ajax call or any event call this

$myModal.fadeIn();

// When your ajax call is done, then hide it again on the callback

$myModal.fadeOut();