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
Note:
------
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 :-)
/********************************************************************************/
<html>
<body>
<-- 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>
</tr>
</table>
</div>
</body>
</html>
/********************************************************************************/
Hope this is of use
Thanks and Regards,
Karthick
No comments:
Post a Comment