3

select、textfield、input、div、tableなどの要素を半透明のdivで簡単にカバーまたはオーバーラップできる再利用可能な関数を作成して、正確な高さと幅にしたいと考えています。

要素の位置とサイズを取得できます。

$(element).height()
$(element).width()
$(element).offset().top
$(element).offset().left

ただし、要素の位置とサイズをdivにバインドするにはどうすればよいですか? 要素の位置またはサイズが変更されると、div が変更されます。どうすればそれができるかという提案はありますか？または、これ用の既存の jquery プラグインはありますか? これは、ajax などの操作のためにユーザー インタラクションから要素を一時的に無効にするのに非常に役立つと思います。

ありがとう。

4

2 に答える 2

2

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');
    });
};

Bootply のデモ: http://bootply.com/87132

これは、Bootstrap 要素だけでなく、一般的に機能し、再利用できるはずです!

于 2013-10-11T14:52:51.840 に答える
0

このような

デモ

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;
}
于 2013-10-11T07:28:58.167 に答える