Online Training Spring Hibernate Training in Delhi R Programming Training Course Big Data and Hadoop Training Java Training  

How can we implement Pop-up in JQuery without Plugin?



Share on Google+Share on Google+

How can we implement Pop-up in JQuery without Plugin?
1 Answer(s)      6 years and 8 months ago
Posted in : JavaScript Questions

Hi Sir

How can we Implement pop-up in JQuery without using plug-in. Please provide me code with detailed answer.

Thanks in advance.

View Answers

December 15, 2010 at 1:10 PM

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;

<script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script type="text/javascript">
    $(".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");
<body><div class="rss-popup">
<font color="purple">
<a href="" id="rss-icon">RSS Feed</a>
<em>click on logo to connect to Roseindia</em></font></div</body>