0

我正在使用angular-bootstrap-0.5.0和他们的 datepicker-popup 模板在我的应用程序中选择日期。

我在使弹出窗口在我贴花的图标正下方的行中心打开时遇到问题，单击该图标应该打开它。

这是我现在的模板：

angular.module("template/datepicker/popup.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/datepicker/popup.html",
    "<ul class=\"dropdown-menu\" ng-style=\"{display: (isOpen && 'block') || 'none', top: position.top+'px', right: position.right+'520px'}\" class=\"dropdown-menu\">\n" +
    "   <li ng-transclude></li>\n" +
    "   <li class=\"divider\"></li>\n" +
    "   <li style=\"padding: 0px;\">\n" +
    "       <span class=\"btn-group\">\n" +
    "           <button class=\"btn btn-small btn-inverse\" ng-click=\"today()\">today</button>\n" +
    "       </span>\n" +
    "       <button class=\"btn btn-small btn-success pull-right\" ng-click=\"isOpen = false\">closed</button>\n" +
    "   </li>\n" +
    "</ul>");
}]);

这是负责弹出窗口将弹出的位置的行：

ng-style=\"{display: (isOpen && 'block') || 'none', top: position.top+'px', right: position.right+'520px'}

我试图添加520px它以使其在中心打开，但在较小的屏幕上这当然不能正常工作。也top: position.top总是不太好。我相信解决方案很简单，但我不擅长定位元素。

4

1 回答 1

0

为了在屏幕中央显示绝对 div，您应该首先为您的对话框设置一个静态宽度（以 px、em 或 rem 为单位），然后使用以下 css 规则：

left: 50%;
margin-left : -(dialogWidth/2) px;
width : dialogWidth px;

假设您想将对话框的宽度设置为 250px，那么上面应该是：

left: 50%;
margin-left: -125px;
width : 250px;

请注意，如果您设置静态高度，则可以将相同类型的规则应用于顶部定位

于 2013-09-20T11:52:44.050 回答