jquery - 如何让 jQuery-UI 日期选择器显示在屏幕中央？

Question

现在，日期选择器的位置是通过 javascript 通过 jQuery-UI 框架添加的内联 css 确定的。我希望日期选择器位于屏幕中央，而不是根据触发器的位置来定位。

如何用我自己的东西覆盖由 jQuery 生成的这个定位？我什至有一个 jQuery 脚本来将 div 置于屏幕中央，但由于脚本被 jquery-ui 覆盖，它仍然无法正常工作。

这是生成的内联代码:

<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; ">

这是一个 jQuery 函数，用于在屏幕上居中放置一个 div:

//center div on screen
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
}

调用者:$('.ui-datepicker').center();

使用此函数使 .ui-datepicker div 在屏幕中央居中的代码是什么？

编辑:这是网站:http://univiaje.spin-demo.com/

• 单击边栏中红色背景下方的链接之一，应打开一个窗口
• 点击日历图标
• 失败:(

Answer 1

HTML、CSS解决方案

HTML:

<div id="datepicker-container">
  <div id="datepicker-center">
    <div id="datepicker"></div>
  </div>
</div>

CSS:

#datepicker-container{
  text-align:center;
}
#datepicker-center{
  display:inline-block;
  margin:0 auto;
}