如何将弹出位置修复到按钮下方?

时间:2014-06-05 11:34:56

标签: jquery asp.net-mvc-4

我正在尝试按下弹出按钮。

我可以左右改变位置,但弹出窗口会出现在屏幕上方。

如何设置弹出位置高度?

这是我的代码:

JS

      $(function () {
          $("#myDialog").dialog({
               autoOpen: false,

               show: 'fade',
               hide: 'fade',
               modal: false,
               width: 300,
               draggable: false,
               minHeight: 200,
               //buttons: {
               //    "Close": function () {
               //        $(this).dialog("close");
               //    }
               //}
          });

          $("#myLink").click(function (e) {
               e.preventDefault();
               $("#myDialog").dialog("open");
               return false;
          });

          function positionDialog() {
               linkOffset = $("#myLink").position();
               linkWidth = $("#myLink").width();
               linkHeight = $("#myLink").height();
               scrolltop = $(window).scrollTop();
               $("#myDialog").dialog("option", "position", [(linkOffset.left - 550/ 2) + linkWidth / 2, (linkOffset.top - 220 / 2 ) + linkHeight - scrolltop]);
           }

           positionDialog();

           $(window).resize(function () {
               positionDialog();
           });

           $(window).scroll(function () {
               positionDialog();
           });
      });

HTML

<div style="text-align:center; float:left"><a href="#" id="myLink">Login here</a></div>
         <div id="myDialog" title=" Login">
         @Html.Partial("_LoginPopupPartial")                 
</div>

有人可以帮助我。弹出窗口应该放在我放置按钮的地方。它也应该在按钮下方。

1 个答案:

答案 0 :(得分:0)

您可以将弹出窗口设为按钮的子项。然后它会自动在正确的位置。