Question

我有一个模态，其中我正在显示一个表单，在提交表单时我想隐藏表单的内容，而是想要显示一些固定大小的100xx x 100px的ajax指标。问题是如何使用一些动画将模态的宽度/高度减小到100x100并将该模态保留在屏幕中心？

<div class="modal">
    <form>
    ....
    </form>
    <div class="ajax-indicator hidden"></div>
</div>

点击提交按钮后

<div class="modal">
    <form class="hidden">
    ....
    </form>
    <div class="ajax-indicator"></div>
</div>

Answer 1

创建多个阶段（CSS类）＆amp;用js事件激活它们。

您可以使用一些事件处理程序来实现动画，例如：

click,transitionend,submit...

然后只需更改通讯类。

<强>的CSS

#box{
 position:fixed;
 width:0px;
 height:0px;
 top:0%;
 left:0%;
 background-color:black;
 margin-left:0px;
 margin-top:0px;
 -webkit-transition:all 700ms ease;
 overflow:hidden;
 border-radius:0px;
}
#box.active{
 width:300px;
 height:300px;
 top:50%;
 left:50%;
 margin-top:-150px;
 margin-left:-150px;
 border-radius:0px;
}
#box.loading{
 width:100px;
 height:100px;
 top:50%;
 left:50%;
 margin-top:-50px;
 margin-left:-50px;
 border-radius:100px;
}

<强> JS

在此示例中，我使用setTimeout的假加载时间，在点击提交btn后持续2秒

function clk(e){
 box.classList.add('active');
}
function frm(e){
 e.preventDefault();
 box.classList.remove('active');
 box.classList.add('loading');
    setTimeout(function(){box.classList.remove('loading')},2000);
}
var btn=document.getElementById('btn'),
    box=document.getElementById('box');
btn.addEventListener('click',clk,false);
box.firstChild.addEventListener('submit',frm,false);
//box.addEventListener('webkittransitionend',dosomethingelse,false);

<强>演示

http://jsfiddle.net/hHD87/

此示例使用现代技术..适用于所有最新的浏览器... chrom，firefox ie10 opera ios android ...

也许您需要添加自定义前缀，例如-webkit -moz -o ...

这里是另一个使用延迟的例子，最后完全隐藏窗口非常重要。

http://jsfiddle.net/RAu8Q/

Answer 2

创建一个可以添加到模态的css类，将其大小设置为100x100。如果你的模态居中与保证金：0自动它应该自动调整自己。然后在加载完成后删除该类。

关于动画，您可以添加转换：所有.5s到您的.modal-class

示例：http://jsfiddle.net/eSsM5/1/

的CSS：

.modal {
    margin: 0 auto;
    width: 200px;
    height: 200px;
    transition: all .3s;
    background-color: red;
    text-align: center;
    padding-top: 30px;
}

.loading {
    width: 100px;
    height: 100px;
}

.loading > form {
    display: none;
}

.loading > .spinner {
    display: block;
}

.spinner {
    display: none;
}

HTML

<div class="modal">
    <form>
        your form
    </form>
    <div class="spinner">
        Now loading!
    </div>
</div>
<button type="button">toggle loading</button>

JS

document.querySelector("button").addEventListener("click", function() {
    var modal = document.querySelector(".modal")
    modal.classList.toggle("loading")
})

Answer 3

点击提交按钮后，更改模型框的CSS。

var myElement = document.getElementByClass("model");
myElement.style.width = "100px";
myElement.style.height = "100px";

并将ajax-indicator div位置设置为居中以使模型处于中心位置。

var modeElement = document.getElementByClass("ajax-indicator");
modelElement.style.align="center";

通过动画更改模态的内容和调整窗口大小

3 个答案: