Skip to main content

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..!!!

Comments

Popular posts from this blog

செந்தாழம் பூவில் வந்தாடும் தென்றல் (Senthazham poovil vandhaadum thendral) song lyrics and meaning

I am so astonished by the creativity of Kaviyarasu Kannadasan and the language itself. This is one of my favourite song in the tamil movie called Mullum Malarum. Wonderful movie with extraordinary music composition by famous Isaigyaani Ilayaraja sir. 
                I will try giving the exact meaning of this song which portrays how beautiful women are and you can relate to anything which comes to your mind when you read it along. Kannadasan, Ilayaraja and K.J.Yesudas, a combination that shouldn't be missed.

Song:   Senthaazham poovil vandhaadum thendral Lyrics: Kannadasan Music: Ilayaraja Singer: K.J.Jesudas
செந்தாழம் பூவில் வந்தாடும் தென்றல்  என் மீது மொதுதமா.. (x2) பூ வாசம் மேடை போடுதம்மா  பெண் போல ஜாடை பேசுதம்மா.. அம்மம்மா ஆனந்தம்.. அம்மம்மா ஆனந்தம்..
Senthaazham poovil vandhaadum thendral  En meedhu modhudhamaa.. Poo vaasam medai podudhamaa Penn pola jaadai pesudhamma.. Ammammaa aanandham.. ammammaa aanandham..
The breeze that dances over screw pine flower  comes…

English Translation of "Voda Voda " song from Mayakam Enna

Hi guys
       Too many Tamil post and my Non-Tamil readers would have really bugged up with my previous posts. Many non-tamil people who hear this song "Voda Voda Voda" from Mayakam Enna is wondering what is the exact meaning of this song. They don't know the meaning but still they enjoy it. Now read this post, know the meaning and sing it along.

       I have differentiated the original lyrics of the song in blue color and the meaning of it in the next line in red color. Here we go...

Voda voda voda thooram korayala... Running running running distance didn't get reduced... Paada paada  paada paatum mudiyala... Singing singing singing song didn't get over... Poga poga poga onum puriyala, aaga motham onum velangala... Time passing by nothing able to grasp, totally nothing understood...
Free ah suthum podhu figure illaye...
While roaming freely figure was not there... Pudicha figurum ipa free ah illaye... The figure I liked is not free now.. Kayil bat iruku ball illaye, life…

திருக்குறள் - கல்யாண பால்

நீண்ட நாட்கள் ஆகியும் பதிவை புதிப்பிக்க முடியாததற்கு வருந்துகிறேன். முந்தைய பதிவின் தொடர்ச்சியாக கல்யாண பால். இதற்கு முன் சைட் பால் மற்றும் காதல் பால் படித்திருப்பீர்கள் என நம்புகிறேன். படிகாதோற்கு இதோ இணைப்பு - http://freekillwrites.blogspot.com/2011/06/blog-post.html மற்றும் http://freekillwrites.blogspot.com/2011/08/blog-post.html . நான் எழுதும் இக்குறள் சிரிப்பதற்காகவும் மற்றும் சிந்திபதற்காக மட்டுமே.. யார் மனதையும் புண்படுத்தும் நோக்கம் இல்லை.

கல்யாண பால்
காதலில் ஜெயமென்றால் கணவன் அஃதில்லையேல் 
அடுத்தப்பெண்ணை  தேடல் ஜெயம்.

மனைவி அமைவது இறைவன் கொடுத்தவரம்
அதைமாற்றி அமைப்பவன் புத்திசாலி.

பெண்ணுக்கு கழுத்தில் ஏறும் தாளிசங்கிலி
அஃது ஆணின் மரணசங்கிலி.

ஆண் பெண் திருமணம் செய்துவிடல்
சந்தோஷம் என்பது கணவாம்.


தாரம் தாய்போற் இருப்பின் அதிர்ஷ்டம்
நாய்போற் இருப்பின் துரதிருஷடம்.

 கல்யாணம் ஆனபின் குழந்தைப்பேறு அழகு
முன்னேரே பெற்றால் அசிங்கம்.


கல்யாணம் சுவர்கத்தில் நிச்சயிக்கப்படும் ஆனபின்
வாழ்வோர் நரகத்திலே வாழ்வார்.  


தாய் தாரம் அடிதடிக்கு நடுவில்
ஆட்டநடுவராக இருத்தல் ஆபத்து.�����…