Html 以引导为中心的DIV/Form处理模式

请看这个：

这是一种让用户知道后端正在发生某些事情的模式，请稍候。我怎么能在Bootstrap3中只在表单/div上，而不在整个页面上

---

感谢您的帮助

照他们做的那样做吧，您可以使用chrome inspector，但我将为您介绍这项技术

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

2） 将该容器的位置设置为相对，将模态位置设置为绝对，如果不将父位置设置为相对，则模态将相对于主体标记

< P > 3）为你的模态设置一个固定的WIDT和高度，让我们同时说“代码>200 px< /代码>，然后为50%的模态添加一个顶部和左边的属性，这将使你的元素左上角相对于它的父中心对齐，因为你希望元素的中心在中间而不是在拐角处，你需要做一个偏移调整，通过向上移动和向左移动其大小的一半，为此您将使用

边距顶部：-100px和
左边距：-100px宽度/2和高度/2的负数

以下是您的html的外观：

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

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

你到底想要什么？你想让旋转的东西覆盖页面的一部分吗？有一个表单，我想相同的模式只适用于表单，而不是整个页面，以表单为中心，响应这不是以表单为中心，这可能是由于使用与bootstrap相同的.modal类而导致的一些css问题。这样，我们需要在每个表单上都有modal div，如何只在脚本中的某个地方粘贴一次，比如header，然后在每个表单/div上使用它？然后我们可以用jQuery激活它，比如：$myCustomModal（'DIV#u ID_NAME'，show/hide）；另一件事，请不要使用.modal类，也不要使用一些bootstrap无法使用的自定义类。我已经编辑了类名，如果您想覆盖bootstrap modal类或您可能使用的任何其他css库中的属性，请在每个属性值旁边添加“！important”。现在，考虑到每个表单都有多个模态，这取决于您的布局，您可以使用一个模态，然后将其放置在主容器中或html的末尾，正好在结束正文标记之前，然后使用position fixed，而不是position absolute，并且无论您是否滚动，模态都将在页面中居中。