在屏幕中央显示jQuery的日期选择器

Displaying jQuery's Datepicker in the center of the screen

本文关键字：日期 选择器 jQuery 显示 屏幕      更新时间：2023-09-26

这是默认生成的代码

<div id="ui-datepicker-div" class="ui-datepicker 
  ui-widget ui-widget-content ui-helper-  clearfix ui-corner-all 
  ui-datepicker-multi ui-datepicker-multi-2" style="width: 34em; 
  position: absolute; left: 349px; top: 453px; z-index: 1; display: block; ">

这样做的问题是日期选择器显示在触发器输入旁边，而不是我想要的中心。

您可以在此处查看演示站点：http://enniakiosk.spin-demo.com/travelers.php


有谁知道如何使用 javascript 将.ui-datepicker类居中？显然，CSS 不起作用。

如果您使用的是 .dialog 方法，它接受一个参数，pos该参数是您希望对话框显示的位置的坐标（上/左）的[x, y]数组。

此解决方案要求您计算顶部和左侧值，以便对话框在页面上居中显示。这取决于盒子的大小和视口的大小，您可以通过 $(window).height() 和 $(window).width() 来确定。您必须即时生成此内容。

一种快速而肮脏的方式来完成你想要的事情可以通过CSS来完成。您可以直接覆盖 jquery UI 样式，也可以将一些样式添加到您自己的样式表中。这依赖于使用"！important"，但它有效，并且您没有深入研究 UI 代码。

以下是您可以添加到您自己的样式表中的内容。您需要使用要生成的日期选取器的大小。这是我只是使用通用演示的大小。

#ui-datepicker-div {
position: absolute !important;
left: 50% !important;
top: 50% !important;
margin-left: -96px; /* approx half the height of the datepicker div - adjust based on your size */
margin-top: -73px; /* half the height of the datepicker div - adjust based on your size */
}

在 CSS 中使用"！important"是一个应该避免的拐杖，但只是展示它是如何做到的......

相关文章：