Question

请参阅：http://bootsnipp.com/snippets/featured/centered-processing-modal

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

感谢您的帮助

Answer 1

只要这样做就可以了，你可以使用chrome检查器，但我会为你描述这种技术。

1）创建一个div（或任何你想要的元素，只要它不是一个块元素，你将其显示更改为阻止）在容器内，在这种情况下你的表单或包含该表单的div。

2）将容器的位置设置为relative，将模态位置设置为absolute，如果未将父位置设置为relative，则模态将相对于body标签。

3）为你的模态设置一个固定的宽度和高度，让两者都说200px，然后为50％的模态添加一个top和left属性，这将使你的元素左上角相对居中因为你想要元素的中心在中间而不是角落，你需要做一个偏移调整，向上移动一半大小，为此你将使用margin-top: -100px;和{ {1}}这是widht / 2和height / 2

的否定

以下是 html 的外观：

margin-left:-100px;

以下是 css 的样子：

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

现在，您应该将其设置为隐藏，并且在执行您的ajax请求时，您可以使用javascript设置其可见性。

Jquery 示例

.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*/
}

DIV /表格上的Bootstrap居中处理模式

1 个答案: