将弹出窗口附加到div的底部

我想要一个可点击的div，以便当它被点击时它附加到被点击的div的底部。我有它，所以当我点击它出现鼠标的地方，但我希望它是正确的下面的div被点击，并正好对底部边界。将弹出窗口附加到div的底部

我试过使用$（div）.position.left（）;但它不会将它放置在正确的位置，并在您调整屏幕大小时进行更改。

任何想法如何做我在找什么？

感谢，

克雷格

下面是代码

$('#clickDetails').click(function(e) { 
$('#dcHover') 
.css('position', 'absolute') 
.css('top', e.pageY + 10) 
.css('left', e.pageX - 8) 
.css('z-index','2') 
.toggle(); 
//$('#clickDetails').append('<div id="dchover">test</div>'); 
});

，这是div标签

<div id="clickDetails" style=" width: 10px; background-color:red; padding: 1px 5px 1px 5px; color: white; -moz-border-radius:5px; margin-top:-80px; margin-right:35px; z-index: -1;">!</div>

来源

2011-09-27 craigtb

请附上您的代码，以便我们可以有一个更好看;-)。 – JNDPNT

对于您试图定位的div，您确定将其标记为绝对定位吗？ 'position：fixed;'也许你可以在http://jsfiddle.net上做一个模型，这样我们就可以看到你的工作到目前为止，并提供帮助。 – JohnFx

尝试使用。经过（）函数Jquery

HTML：

<div id="div1" class="d">Click Me</div> 
<div id="div3" class="d">Click Me</div>

的Javascript

$(".d").click(function(){ 
    $(this).after("<div id='div2'>Appended</div>"); 
});

工作实例：http://jsfiddle.net/PeepD/1/

来源

2011-09-27 14:57:09

你申请的CSS样式的元素已被追加之前，因此他们没有被添加到dchover

尝试重新排列您的代码，如下所示：

$('#clickDetails').click(function(e) { 
$('#clickDetails').append('<div id="dchover">test</div>'); 
$('#dchover') 
.css('position', 'absolute') 
.css('top', e.pageY + 10) 
.css('left', e.pageX - 8) 
.css('z-index','2') 
});

来源

2011-09-27 15:00:55 Curt

这听起来像你实际上想要在当前div后追加一个新的div。

为此，请使用jQuery after方法。

$(function(){ 

    // handle the click event of the div with id 'clickme' 
    $("#clickme").click(function(){ 

     // this is now the div that has been clicked 
     $(this).after("<div class='added'>testing</div>"); 

    }); 

});

然后使用CSS来减少或增加div之间的边距，如您所需。

看看这里：

http://jsfiddle.net/Ajbyt/3/

来源

2011-09-27 15:13:13 Swaff

将弹出窗口附加到div的底部

回答

相关问题