JavaScript Popups

JavaScript Popups

It might be a little late to write a blog on JavaScript popups. Since most of the modern browsers have started treating popups as some alien equipment, it has become necessary for most to find an alternative. Personally, I never liked the idea of popping up content in separate windows. It looks cheesy and functionality varies greatly from browser to browser. Though there are situations where you actually need to show your users some information or accept something that does not exactly fit either graphically or logically in your current page. Navigating to other pages is for twisted elephants. So the best way that remains with us is using JavaScript based popups.

Now it goes unsaid that there is no direct way to do this. So, we have to write some code for it. Honestly, it is not that hard and with a little imagination, I wrote a small piece of code to create such popups.
Step 1 Turn your background black. Most of the implementations keep it transparent. So did I.

Step 2 Create a div with absolute positioning and position it in the center of the screen.

Step 3 Write JS to show and hide the div.

visibility: visible

and

visibility: hidden

are just fine.

If you choose to use my code, you can download from here. Just include the JS file as well as Teleiotes into the head tag of your html file.

Since my code is generic you can do many customizations. First, you have to initialize the library and then create an object of function ShowPopup()

	popup.init();
	
	txt = "Hello World";
	
	var pop = new popup.ShowPopup({
		text: txt,
        onok: function () {
			//handle when ok is placed
        },
        width: 500,
        height: 300,
        close: true
	});

After you have the object with you, you can show or hide this popup box at will.

	pop.showPop();

Checkout this working example.

JavaScript,popup,dialogTags JavaScript popup dialog