POP UP window to come from top?

Question

I have a popup window coming in my web page on click of a button. I want this popup window to transition from top to the center of the web page on the click of the button can this be done using CSS? Thanks.

Please include code showing what you've tried, an a thorough description of what's going wrong with the code you currently have. — Mike Precup, Jul 22 '14 at 18:14
This is what i have tried , but it didn't work position: relative; top: 10px; width: 500px; transition-property: top; transition-delay: 5s; transition-duration: 5s; — user3002138, Jul 22 '14 at 18:17
CSS cannot control window position only element inside the document. Window do have a `moveTo` however. Unless by popup you mean a modal dialog. — GillesC, Jul 22 '14 at 18:18
Does this window have to be an alert box? Or can be a customized div? — JoJo, Jul 22 '14 at 18:20
You can use a a third party plugin to do this. http://nakupanda.github.io/bootstrap3-dialog/ — JoJo, Jul 22 '14 at 18:26

score 0 · Answer 1 · answered Jul 22 '14 at 18:50

html:

<div id="stage2">
    <div id="box1">#box1</div>
    <div id="box2">#box2</div>
</div>

css:

#stage2 {
   position: relative;
   height: 500px;
   background: #efefef;
   text-align: right;
}
#box1 {
   position: absolute;
   width: 100px;
   height: 100px;
   border: 1px solid #666;
   background: red;
   color: #fff;
}
#box2 {
   position: absolute;
   left: 120px;
   top: 0;
   width: 100px;
   height: 100px;
   border: 1px solid #666;
   background: #00f;
   -webkit-transition: 1s all ease-in-out;
   -moz-transition: 1s all ease-in-out;
   -o-transition: 1s all ease-in-out;
   transition: 1s all ease-in-out;
   color: #fff;
}
#box1:hover + #box2 {
   top: calc(50% - 50px);
   background: yellow;
}

to use this, the two divs should be next to each other.what if they are not next to each other? — user3002138, Jul 24 '14 at 22:06
its not a problem. What ever place you gonna put that 2nd div it will work. — Monzoor Tamal, Jul 25 '14 at 05:37

score 0 · Answer 2 · edited May 23 '17 at 11:50

You cannot edit an alert box with just CSS as it is a system object. Try using a customized div or JQuery UI, or a plugin. See this SO question about it: how to change the style of alert box
Using a customized div is very easy:

<div id="cover"><div id="alert"><p>I am a alert!</p><button onclick="hide()">Ok</button></div>
</div>
    <button onclick="show()">Show alert</button>

CSS:

#cover{
    position:fixed;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    background:rgba(0,0,0,0.5);
    z-index:999;
    display:none;
}
#alert{
    width:300px;
    height:200px;
    background:white;
    margin:200px auto;

}

JavaScript:

function show(){
     document.getElementById('cover').style.cssText='display:block;';
}
function hide(){
     document.getElementById('cover').style.cssText='display:none;';
}

POP UP window to come from top?

2 Answers2