How to create a pop-up div on the mouse and stay when you click

Question

I am trying to create a popup that can appear when you hover over it and remain when I click on the link. The problem is that I am already creating a popup when the mouse is above it, but it will disappear when the mouse leaves. How can I make the popup appear 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?

Answer 1

Try the following:

 $('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')); if (!($("a.popper").hasClass("show"))) { $(target).hide(); //dont hide popup if it is clicked } }); $('a.popper').click(function (e) { var target = '#' + ($(this).attr('data-popbox')); if (!($(this).hasClass("show"))) { $(target).show(); } $(this).toggleClass("show"); }); 

FIDDLE here.

Answer 2

Use the click method in jquery, so for example $('a.popper').click(); and pass the parameters in the click method, which have a popup similar to how you use the hover method and mouseover method