JQuery позиционирования?

Question

У меня есть динамический div высоты, который вставляется в dom, когда вы нажимаете Ctrl при вводе html.

Я хочу, чтобы нижний правый угол совпал с правым верхним углом ввода, по которому щелкнули.

Какие CSS-стили / jQuery я должен использовать для правильного позиционирования?

Я не могу включить пользовательский интерфейс jQuery, поэтому, пожалуйста, не предлагайте его.

Answer 1

Вы можете использовать .offset () , которые возвращают верхние левые координаты относительно документа.Затем вы можете добавить ширину элемента ( .width () ), чтобы получить верхний правый угол.

И чтобы разместить там div, используйте ту же технику на div, только удалите height ( .height () ) и ширина.

Просто небольшая заметка, которую вы должны учитывать для границ, полей и отступов, поскольку jQuery не включает их в ширину / высоту.

Answer 2

Вы можете использовать плагин jQuery PositionCalculator .

JavaScript:

jQuery(function($) {
  var count = 1;
  var $popup = $('#popup');

  function showPopup(event) {

    // reset position
    $popup.show().css({top:0, left:0});

    // calculate new position
    var calculator = new $.PositionCalculator({
      item: $popup,
      itemAt: "bottom left",
      target: this,
      targetAt: "top right",
      flip: "both"
    });
    var posResult = calculator.calculate();

    // set new position
    $popup.css({
      top: posResult.moveBy.y + "px",
      left: posResult.moveBy.x + "px"
    });
  }

  // initial add event handler
  $('.has_popup').on('click', showPopup);
  $popup.on('click', function() { $popup.hide(); });
});

HTML:

<input type="text" class="has_popup"  value="click me"/>

<div id="popup" style="display:none; position:absolute; padding:10px; background:rgba(0,0,0,0.8); color:#ffffff">
  I am the popup. <b>Click me to close</b>
</div>

Вот пример в JSBin