Question

我正在使用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也总是不那么好。我相信解决方案很简单，但我对定位元素并不擅长。

Answer 1

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

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

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

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

请注意，如果设置静态高度

，则可以将相同类型的规则应用于顶部定位

尝试将DatePicker模板设置为在页面中间打开

1 个答案: