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

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;

}
</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>









Related Tutorials/Questions & Answers:
Advertisements