Hi Sir
How can we Implement pop-up in JQuery without using plug-in. Please provide me code with detailed answer.
Thanks in advance.
Hello Friend
You need one png image for pop box. Here we are using "bubble.png" as background image for pop-up box. The code is given below :
<style type="text/css"> * { margin: 0; padding: 0; border: 0; } .rss-popup { margin: 80px; padding: 0; width: 100px; position: relative; } div.rss-popup em { background: url(bubble.png) no-repeat; width: 100px; height: 60px; position: absolute; top: 120px; left: 120px; text-align: center; text-indent: 3px; z-index: 1; display: none; } #rss-icon { width: 231px; height: 60px; background: url(logo.gif) no-repeat 0 0; text-indent: -9999px; margin: 0; display: block; } </style> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".rss-popup a").hover(function() { $(this).next("em").stop(true, true).animate({opacity: "show", top: "60"}, "slow"); }, function() { $(this).next("em").animate({opacity: "hide", top: "60"}, "fast"); });}); </script> </head> <body><div class="rss-popup"> <font color="purple"> <a href="http://www.roseindia.net/" id="rss-icon">RSS Feed</a> <em>click on logo to connect to Roseindia</em></font></div</body>