QuestionAsk Questions?
samar
How can we implement Pop-up in JQuery without Plugin?
1 Answer(s) 2 years and 6 months ago
Posted in : JavaScript Questions
1 Answer(s) 2 years and 6 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;
}
</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 Pages:
