Question

我想编写一个通用的Javascript函数，它将获取网页上元素的ID，并将div正好放在它的顶部。这是为了保持Ajax忙指示符。

我尝试了以下内容......

function showAjax(el) {
  var pos = $("#" + el).position();
  var width = $("#" + el).outerWidth();
  var height = $("#" + el).outerHeight();
  var ajax = $('<div id="ajaxBusy"></div>');
  ajax.css("top", pos.top);
  ajax.css("left", pos.left);
  ajax.css("width", width);
  ajax.css("height", height);
  ajax.insertAfter("#" + el);
}

但是，这会将新元素定位得太高，并且左边是边距的大小。因此，如果传入的元素的上边距为10px，则页面上创建的元素将高出10px。

我试图通过计算边距并将它们添加到...来解决这个问题。

function showAjax(el) {
  var pos = $("#" + el).position();
  var width = $("#" + el).outerWidth();
  var height = $("#" + el).outerHeight();
  var marginL = $("#" + el).css("margin-left").replace("px", "");
  var marginT = $("#" + el).css("margin-top").replace("px", "");
  var ajax = $('<div id="ajaxBusy"></div>');
  var left = pos.left + marginL;
  var top = pos.top + marginT;
  ajax.css("top", pos.top + marginT);
  ajax.css("left", pos.left + marginL);
  ajax.css("width", width);
  ajax.css("height", height);
  ajax.insertAfter("#" + el);
}

然而，这完全把它置于完全错误的位置。

任何人都能解释我应该做什么吗？我还没有任何CSS设置，所以这不会影响事情，我正在为传递给函数的元素使用普通的div标记。

Answer 1

我在这里使用了.appendTo，这似乎在使用innerWidth和innerHeight而没有额外的保证金要求时具有所需的结果。确保父div设置为position:relative;

＆＃13;

function showAjax(el) {

  var width = $("#" + el).innerWidth();
  var height = $("#" + el).innerHeight();
  var ajax = $('<div id="ajaxBusy" class="div2"></div>');
  ajax.css("width", width);
  ajax.css("height", height);
  ajax.appendTo("#" + el);
}

＆＃13;

 .div1 {
  border:1px dotted #ddd;
  width:100px;
  height:100px;
  position:relative;
}

.div2 {
  border:1px dotted #000;
  width:100px;
  height:100px;
  position:absolute;
  top:0px;
  left:0px;
  background:#ddd;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&nbsp;&nbsp;&nbsp;<div class="div1" id="div1" onclick="showAjax('div1');"></div>

＆＃13;

Answer 2

在您的代码中，首先，将div的css-class设置为busy。然后，添加一个类overlay的div作为div的子级。下面的css也应该添加到你的页面中（只有busy和overlay类）。
以下代码显示了css的工作原理：

div{
 display:block;
 background-color:red;
 min-height:50px;
 margin:10px;
}

.busy{
 position:relative;
}

.overlay{
 position:absolute;
 margin:0px;
 top:0;
 left:0;
 background-color:blue;
 width:100%;
 height:100%;
 opacity:.5;
 z-index:100;
}

<div>div-1</div>
<div class="busy">
 <div class="overlay"></div>
 div-2
</div>
<div>div-3</div>

无法将div精确定位在另一个元素上

2 个答案: