How to display a small slide popup window?

Hi, we want to display a popup window(to show that an operation has been done) but we need this window to appear from the bottom of the window and slide up until it entirely appears.
How we can do that?
LVL 3
Abdu_AllahAsked:
Who is Participating?
 
MorcalavinConnect With a Mentor Commented:
Here is a very quick example of how to accomplish something like this on your own.  This is pretty feature limited and doesn't offer a lot of options, but it should give you a place to start from.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script type="text/javascript" src="SlideUP.js"></script>
<script type="text/javascript">
var slider;
window.onload = function() {
   slider = new SlideUP({
        width: 250, //a valid width
        height: 125, //a valid height
        border: '1px solid #000000', //any valid border css declaration
        background: 'url(SlideUp.png)' //any valid background css declaration.  I used a gradient 250x125 background on mine.
    });
};
</script>
</head>
<body>
<div><button onclick="slider.show('<div style=\'text-align: center;line-height:120px\'>This is a test</div>')">Show popup</button></div>
<div><button onclick="slider.close()">Close Popup</div>
</body>
</html>

//SlideUP.js source
 
function SlideUP(options) {
    var mainWindow, mainWindowStyle;
    this.options = options;
    mainWindow = document.createElement('div');
    mainWindowStyle = mainWindow.style;
    mainWindowStyle.width = options.width + 'px';
    mainWindowStyle.height = options.height + 'px';
    mainWindowStyle.border = options.border;
    mainWindowStyle.background = options.background;
    mainWindowStyle.position = 'absolute';
    mainWindowStyle.visibility = 'hidden';
    document.body.appendChild(mainWindow);
    this.mainWindow = mainWindow;
}
 
SlideUP.prototype.show = function(text) {
    var self, mainWindow, mainWindowStyle, intervalGrow;
    self = this;
    mainWindow = this.mainWindow;
    mainWindow.innerHTML = '';
    mainWindowStyle = mainWindow.style;
    mainWindowStyle.left = (window.innerWidth || (document.documentElement.clientWidth || (document.body.clientWidth || 0))) -  this.options.width - 20 + 'px';
    mainWindowStyle.top = (window.innerHeight || (document.documentElement.clientHeight || (document.body.clientHeight || 0))) - 20 + 'px';
    mainWindowStyle.height = '0px';
    mainWindow.currentHeight = 0;
    mainWindowStyle.visibility = 'visible';
    intervalGrow = window.setInterval(function() {
        if(mainWindow.currentHeight < self.options.height) {
            mainWindowStyle.height = mainWindow.currentHeight + 'px';
            mainWindowStyle.top = parseInt(mainWindowStyle.top.split('px')[0], 10) - 4 + 'px';
            mainWindow.currentHeight+=4;
        }
        else {
            mainWindow.innerHTML = text;
            window.clearInterval(intervalGrow);
        }
    }, 10);
}
 
SlideUP.prototype.close = function() {
    this.mainWindow.style.visibility = 'hidden';
}

Open in new window

SlideUP.png
0
 
Abdu_AllahAuthor Commented:
Yes exactly but I donot prefer to plugin entire JQuery, is there a sample could available?
0
 
Abdu_AllahAuthor Commented:
Morcalavin, here is a question based on your slide window:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_24294972.html
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.