Popup using jQuery
Click on any question, it will open a popup with answer
Do you like ASP or Php?
I like ASP.
Do you like JQuery or Prototype?
I like JQuery.
Do you like this page
I hate this page.
Do you eager to know, how I did this?At first,here is the html code for the content
<div class="question">
Do you like ASP or Php?</div>
<div class="answer">
I like ASP.</div>
<div class="question">
Do you like JQuery or Prototype?</div>
<div class="answer">
I like JQuery.</div>
<div class="question">
Do you like this page</div>
<div class="answer">
I hate this page.</div>
And for the class that are mentioned in the HTML code, here is the stylesheet
<style type="text/css">
.answer
{
display: none;
padding:10px;
}
</style>
Now if you want to know the jQuery code, here it is. It is so simple that no explanation is required.
<script type="text/javascript">
$(document).ready(function(){
$(".question").click(function(){
$(".answer").hide();
$(this).next(".answer").css({
position:'absolute',
width:'300px',
height:'150px',
border:'2px solid Yellow',
background:'lightYellow',
zIndex:'9999',
top:($(window).height())/2,
left:($(window).width())/2-150
}).show("slow");
});
$(".answer").click(function(){
$(this).hide("slow");
});
});
</script>