弹出窗口的元素和某个元素绑定一起,且弹出窗口可以滚动,元素也随着移动
办法:子绝父相,如果要显示的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>