jquery让自定义的弹出框动态定位在指定的位置

1.业务是这样的

每一组数据中有一个待审核按钮，点击后在按钮下面显示审核理由框。
2.样式

<div class="text-center reason d-none" >
                <textarea rows="4" cols="30" placeholder="请输入审核理由" class="form-control" id="reason" name="reason"></textarea>
                <input class="btn btn-success" id="pass" value="通过" name="1">
                <input class="btn btn-danger" id="reject" value="不通过" name="2">
                <input class="btn btn-default" id="return" value="取消">
            </div>

.reason{
	z-index: 2001;/*让reason置于最顶部*/
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);/*水平居中*/
    width: 90%;
    }

3.js部分

$("#check").live("click", function () {
            var id = $(this).attr("name");
            $('.reason').css("top",$(this).offset().top+"px");
            //设置弹出框距离父级的距离
            $(".mask").show();//灰色透明幕布
            $(".reason").show();
            $("#pass").click(function () {
                var reason = $("#reason").val();
                ajaxForm(id, reason, "1");
                //调用ajax执行通过操作
                BindData("", "0");
                //重新显示数据
            });
            $("#reject").click(function () {
                var reason = $("#reason").val();
                ajaxForm(id, reason, "2");
                BindData("", "0");
            });
        });

如果要一直居中可以这样写

  $('.reason').css("top", $(document).scrollTop()+($(window).height()-$("弹出框").height())/2 + "px");