我想做一个可重用的函数,使我能够轻松地覆盖或重叠一个元素,如选择、文本字段、输入、div、表格等,并用一个半透明的div 到它的确切高度和宽度。
我能够获得元素的位置和大小:
$(element).height()
$(element).width()
$(element).offset().top
$(element).offset().left
但是,如何将元素位置和大小与div 绑定?如果元素位置或大小发生变化,则div 也会发生变化。有什么建议,我该怎么做?或者,是否有任何现有的jquery插件?我相信这对于临时禁用用户交互中的元素以进行 ajax 等操作非常有用。
谢谢。
jQuery .wrap()
函数和适当的CSS来创建函数/插件。
$.fn.overlay = function() {
return this.each(function(){
var $this = $(this);
var left = $this.offset().left;
var top = $this.offset().top;
var width = $this.outerWidth();
var height = $this.outerHeight();
$this.wrap("<div id='overlay'> </div>")
.css('opacity', '0.2')
.css('z-index', '2')
.css('background','gray');
});
};
引导演示:http://bootply.com/87132
这应该普遍工作并且是可重用的......而不仅仅是用于引导元素!
像这样
演示
.css
div {
position:relative;
z-index:1;
height:200px;
width:400px;
background-color:green;
}
div div {
position:absolute;
z-index:2;
top:0px;
bottom:0px;
left:0px;
right:0px;
background-color:black;
opacity:0.5;
}
div div input {
position:relative;
top:25px;
z-index:1;
}