有关示例，请参见http://jsfiddle.net/u9qj0k9t/10/。
我正在尝试创建与页面上的常规元素绑定的上下文菜单。但是，我无法控制该元素在页面上的布局方式。如果包装它的任何元素没有附加位置：绝对/相对，则上下文菜单可以正常工作，但是当上下文菜单弹出时，相对于元素的左上角而不是页面显示弹出窗口。我意识到这是设计使然，但我希望有一些css技巧可以将元素绝对定位在页面上，而不管其包含方式。
<div>
Comment<br/>
Comment<br/>
Comment<br/>
<div style="position:relative;"> <!-- have no control over this-->
<div id="customUIElement">
<span id="placeHolder">Click Me</span>
</div>
</div>
</div>
$("#placeHolder").bind("click", function(e){
var m = $("#popup");
if(!m.length){
var m = $("<div id='popup'></div>");
$("#customUIElement").append(m);
}
m.css("height",100);
m.css("width",100);
m.css("background-color","#ff0000");
m.css("zindex",9999999);
m.css("position","absolute");
m.css("top", e.pageY);
m.css("left", e.pageX);
m.html("Hello, world");
m.fadeIn("fast");
});
我只想不追加弹出该元素，
但到页面：
$("#placeHolder").on("click", function(e){
var m = $("#popup");
if(!m.length){
m = $("<div id='popup' />");
$('body').append(m);
}
m.css({
height:100,
width:100,
backgroundColor:"red",
zIndex:9999999,
position:"absolute",
top: e.pageY,
left: e.pageX
}).html("Hello, world").fadeIn("fast");
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句