我正在尝试创建弹出窗口,该弹出窗口可以在鼠标悬停在其上方时显示,并在单击链接时停留。问题是我已经使弹出窗口在鼠标悬停在其上方时显示,但在鼠标离开时消失。如何才能我使弹出窗口在单击时保持显示。这是我的代码:
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>
我有什么想法可以做到这一点吗?
尝试这个:
$('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");
});
在这里小提琴。 http://jsfiddle.net/6uSwA/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)