javascript – 如何在鼠标上创建弹出div并在单击时保持不变

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

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,1);
    Box-shadow: 0px 0px 5px 0px rgba(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>

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

解决方法

试试这个：

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

原文地址：https://www.jb51.cc/js/158729.html