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.

Answer 2

在jquery中使用click method，就像$('a.popper').click();一样，并在具有弹出窗口的click方法中传入参数，类似于使用悬停方法和鼠标悬停方法的方式

如何在鼠标上创建弹出div并在单击时保留

2 个答案: