changing content of modal and resizing window with animation

Question

I have a modal in which I am showing a form, on submitting the form i want to hide the content of form and instead want to show some ajax indicator of fixed size 100px x 100px. The issue is how to reduce the width/height of the modal to 100x100 with some animation and remaining that modal within center of screen?

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

after click of submit button

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

Answer 1

Create multiple stages (CSS classes) & activate them with js events.

You can achieve your animation with just some eventhandlers such as:

click,transitionend,submit...

and then just change the correspondent class.

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

in this example i'm using a fake loading time with setTimeout that lasts 2sec after clicking the submit btn

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

Demo

http://jsfiddle.net/hHD87/

this example uses modern technologies .. that work on all up to date browsers... chrom,firefox ie10 opera ios android...

maybe you need to add custom prefixexs like -webkit -moz -o ...

here is another example that uses also the delay witch is very important to completely hide the window at the end.

http://jsfiddle.net/RAu8Q/

Answer 2

Create a css class that you can add to your modal which sets its size to 100x100. If you're centering your modal with margin: 0 auto it should automatically adjust itself. Then remove the class when the loading is done.

Regarding animation you can add transition: all .5s to your .modal-class

Example: 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

After click submit button change the css of the model box.

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

and set the ajax-indicator div position to center to get the model at center.

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