Pop-up Using div tag

Hi Bloggies,

                    Here I come up with one more interesting technical  post. You have come across javascript many times and there you could find script for opening a new window by clicking some text or button. But, this has various constraints like if you use open.window() method it will open a new window replacing the existing one. This may sometimes cause problems in opening because browsers expects this to be a pop up window and wont allow you to open it. Here comes the simple solution. Use div tag and produce a onclick event. Try it out guys. This is such a simple code that the one tries it, doesn’t need to be a pro in technology. Here is the scenario which I came across. Visiting a website, I found a option called “Send to a Friend” . I clicked it and I found a small window popped up infront of me with existing website contents as it is. How does it work? Here, goes the code.

 HTML CODE FOR THE TEXT YOU NEED TO CLICK
<div id=”share”><h2><span onclick=”popup()”>Click here to tell a friend</span><h2></div>
Write this HTML code in body tag of your HTML.
YOUR HTML FORM WHICH CONTAINS FROM AND TO ADDRESS
<div id=”layer”>
<div id=”email”>
<div id=”from”>From</div>
<div id=”sender” >
First Name<input type=”text” alt=”firstn”/><br><br>
Last Name<input type=”text” alt=”lastn”/><br><br>
Email Address<input type=”text” alt=”addr”/>
</div>
<div id=”to”>To</div>
<div id=”reciever”>Email Address <input type=”text” alt=”addr”/><br><br></div>
<div id=”send”><center>Send </center></div>
</div>
<div id=”close”><span onclick=”close1()”>Close</span></div>
</div>
This div layer is position absolute which means you can write anywhere in your HTML body tag and use it accordingly.
ADD A PINCH OF CSS
#layer {
 position:absolute;
 display:none;
 width: 500px;
 height: 450px;
 background-color:#e0e0e0;
 border: 1px solid #000;
 z-index:50;
 }
#sender
{
float:left;
height:225px;
width:300px;
}
#receiver
{
float:left;
height:225px;
width:300px;
}
#send
{
margin-left:100px;
height:30px;
width:100px;
border-style:solid;
border-width:3px;
border-color:#008B8B;
color:#008B8B;
}
#close
{
margin-left:450px;
}

You can add this CSS in link tag in head tag of the HTML or just write the CSS in your code. You can add your own CSS according to your favourite colors and styles.

ADD JAVASCRIPT FOR YOUR ONCLICK EVENT
<script type=”text/javascript”>
function popup()
{
document.getElementById(”layer”).style.display=”block”;
}
function close1()
{
document.getElementById(”layer”).style.display=”none”;
}
</script>
Add this Javascript in your head tag or just create a seperate .js file and add the link.
Try it out and have fun…. Happy reading..!!!