弹出窗口的元素定位

弹出窗口的元素和某个元素绑定一起，且弹出窗口可以滚动，元素也随着移动

办法：子绝父相，如果要显示的html是不在父元素一起，则弄到一起

不要用offset的top和left定位，这样无法随滚动而移动

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../jquery-2.1.1/jquery.min.js"></script>
  <script src="layer/layer.js"></script>
  <script src="layui/layui.js"></script>
  <link rel="stylesheet" href="layui/css/layui.css">

</head>

<body style="">
  <button>test</button>
  <div class="layerme" style="display: none;">
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div class="inputPos" style="position: relative;">
      <input type="text" style="">
    </div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>


  </div>
  <div class="inputme" style="display: none; z-index: 1000000000;background-color: red;">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  <script>
    var layer = layui.layer;

    $(document).on("click", 'button', function () {
      layer.open({
        title: '在线调试'
        , content: $('.layerme')
        , area: ["400px", "500px"]
      });
    })
    $(document).on("focus", 'input', function(){
      $('.inputme').insertAfter('input')
      var inputOffset = $("input").offset();
      console.log(inputOffset);
      var cssOptions = {
        // left: inputOffset.left+"px",
        left: '0px',
        // top: inputOffset.top +"px",
        top: $("input").outerHeight+'px',
        position: 'absolute'
      }
      $('.inputme').css(cssOptions).show()
    })
    $(document).on("click", '.layerme', function(e){
      if(e.target.tagName!='INPUT'){
        $(".inputme").hide()
      }
    })


  </script>
</body>

</html>

弹出窗口的元素定位

猜你喜欢