Thursday, December 10, 2009

Simple Alert like popup using simple CSS and Javascript

This is all about a "Simple Alert like popup using simple CSS and Javascript"

Advantages :
- No Script Libraries
- No CSS Files
- No Complex API

Procedure :
- Copy & Paste this code into a notepad
- Save the same as a HTML file.
- Preview the file in browser.
- Go through the styles that I have applied for a couple of minutes to reuse them.

Request :
Dont hate me, if you dont find what you are looking for

The popup I am speaking about shall not halt the execution of any Javascript, it is just that It will look like an alert on the screen and will not let u click on any thing else unless u close it and any subsequent code fragment that produces this will continue executing

Once I happened to cross a hurdle, which demanded me for a simple nice looking UI for displaying a form on a mini popup like a alert dialog over an existing page on the browser. Believe me, it took me a lot of time, energy and effort to find some thing that could help me with this issue.

Ofcourse I got a lot, but unfortunately they where some thing like a large APIs or work arounds for getting a popup window and making it work like a alert dialog etc...

The APIs which does some wonderful, elegant and magnificent things, seemed like they required me to invest atleast a couple of hours on them in downloading em, moving em into my application, study a bit about them before I could get into coding etc..... and I was absolutely out of time.

The other popup window thing fails in fire fox if its settings are configured to block any popup window and opens up a new tab with things scattered around in a ugly way.

So I had to really find a simple solution and I kept pestering my friend google the same way the issue was pestering me. But he kept giving me something that I could not use (pobably I could not understand :) . I am not blaming him, Its just that I suffered.

Some how I have managed to develop a simple alert like popup by learning through the various sources available on the internet and I will really feel happy to save some one else from this issue and my story. So here we go, I am giving you a simple HTML code that will help you understand how to create an "Alert like popup on the browser".

X-) Subject the following code to the above mentioned procedure :-)

  <-- The following button is what you will see on the screen intially-->
   <input type="button" onclick="document.getElementById('TranslusentPane').style.display='block'; document.getElementById('ContentPane').style.display='block';" value="Show stuff">
  <!-- divs to bring the alert section as a popup -->
  <div id="'TranslusentPane'" style="'display:" opacity="50);"> </div>
  <!--end of HistoryDisplayBG div-->
  <div id="'ContentPane'" style="'display:">
   <table style="'background-color:EEEEEE;'" width="'510px'" height="'100%'" align="'center'">
     <tr> <td> <div id="'HistoryDisplay'"> </div></td> </tr>
     <tr> <td align="'center'">
      <span style="font-size:85%;"> </span>
      <input type="button" onclick="//code to close the history popup document.getElementById('TranslusentPane').style.display='none';document.getElementById('ContentPane').style.display='none'" value="Close" class="actionButtons"></td>

Hope this is of use

Thanks and Regards,

No comments:

Post a Comment