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>

No  Responses to "Popup using jQuery"

Leave a Reply