Question

我正在尝试在按钮下放置一个jQuery UI Dialog弹出窗口。

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

如何设置弹出位置高度？

这是我的代码：

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>

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

Answer 1

您可以使用jQuery UI位置实用程序以更简单的方式实现所需。参考：http://api.jqueryui.com/position/

打开对话框时，不要自行计算偏移和位置，只需执行以下操作：

$('#myDialog').dialog('option', 'position', { my: "top", at: "center bottom", of: this }).dialog("open");

jsFiddle这里：http://jsfiddle.net/W7ayC/

.position（）实用程序可以轻松地将结果对话框放在相对于窗口的任何位置，触发打开的对象或通过标准jQ选择器的任何其他元素。

希望这有帮助！

如何使弹出窗口成为按钮的子项？

1 个答案: