javascript - 如何在鼠标悬停时创建弹出式 div 并在单击时停留

Question

我正在尝试创建弹出窗口，它可以在鼠标悬停在它上面时显示，并在单击链接时保持不变。问题是我已经让弹出窗口在鼠标悬停在它上面时显示，但当鼠标离开时它会消失.如何使弹出窗口在单击时保持显示。这是我的代码:

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>

有什么想法可以做到这一点吗？

Answer 1

试试这个:

$('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.