I'm trying to create popup that can show when mouse over it and will stay when click on the link .The problem is I already make the popup will show up when the mouse over it but it will disappear when the mouse leave .How can I make the popup will stay show up when clicked .This is my code :

HTML

<div id=pop1 class=popbox>

    <h2>Job Info Search</h2>

    <h2>WRKNo : <input type=text  /></h2>

    <h2>Result</h2>

    <p>Customer Name : <input type=text  /></p>

    <p>Caller Number : <input type=text  /></p>

    <p>Complosed : <input type=text  /></p>

    <p>Cate : <input type=text  /></p>

    <p>Det : <input type=text  /></p>

    <p>Feedback : <input type=text  /></p>

    <p>WRKNo : <input type=text  /></p>

</div>









This is a popbox test.  <a href=# class=popper data-popbox=pop1>Hover here</a> to see how it works.

CSS

.popbox {

    display: none;

    position: absolute;

    z-index: 99999;

    width: 400px;

    padding: 10px;

    background: #EEEFEB;

    color: #000000;

    border: 1px solid #4D4F53;

    margin: 0px;

    -webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);

    box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);

}

.popbox h2

{

    background-color: #4D4F53;

    color:  #E3E5DD;

    font-size: 14px;

    display: block;

    width: 100%;

    margin: -10px 0px 8px -10px;

    padding: 5px 10px;

}

Javascript

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js type=text/javascript></script>

<script>

$(function() {

    var moveLeft = 0;

    var moveDown = 0;

    $('a.popper').hover(function(e) {



        var target = '#' + ($(this).attr('data-popbox'));



        $(target).show();

        moveLeft = $(this).outerWidth();

        moveDown = ($(target).outerHeight() / 2);

    }, function() {

        var target = '#' + ($(this).attr('data-popbox'));

        $(target).hide();

    });



    $('a.popper').mousemove(function(e) {

        var target = '#' + ($(this).attr('data-popbox'));



        leftD = e.pageX + parseInt(moveLeft);

        maxRight = leftD + $(target).outerWidth();

        windowLeft = $(window).width() - 40;

        windowRight = 0;

        maxLeft = e.pageX - (parseInt(moveLeft) + $(target).outerWidth() + 20);



        if(maxRight > windowLeft && maxLeft > windowRight)

        {

            leftD = maxLeft;

        }



        topD = e.pageY - parseInt(moveDown);

        maxBottom = parseInt(e.pageY + parseInt(moveDown) + 20);

        windowBottom = parseInt(parseInt($(document).scrollTop()) + parseInt($(window).height()));

        maxTop = topD;

        windowTop = parseInt($(document).scrollTop());

        if(maxBottom > windowBottom)

        {

            topD = windowBottom - $(target).outerHeight() - 20;

        } else if(maxTop < windowTop){

            topD = windowTop + 20;

        }



        $(target).css('top', topD).css('left', leftD);





    });



});

</script>

Any ideas how I can do this?