如何使jQuery-UI datepicker显示在屏幕中央? [英] How do I make jQuery-UI datepicker show up in the center of my screen?

问题描述

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

Right now the datepicker's position is determined via inline css that is being added by javascript via the jQuery-UI framework. I'd love to have the datepicker in the center of the screen instead of being located based on where my trigger is.

如何用我自己的东西覆盖由jQuery生成的定位?我什至有一个jQuery脚本将div居中放置在屏幕中央，但是由于该脚本被jquery-ui的脚本覆盖，因此它仍然无法正常工作.

How do I override this positioning being generated by jQuery with something of my own? I even have a jQuery script to center a div in the center of a screen but it's still not working due to the script being overwritten by jquery-ui's.

这是生成的内联代码:

<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居中显示在屏幕上:

Here is a jQuery function to center a div on the screen:

//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置于屏幕中心的代码是什么?

What would be the code to use this function to center the .ui-datepicker div on the center of the screen?

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

here's the website: http://univiaje.spin-demo.com/

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

推荐答案

HTML，CSS解决方案

HTML, CSS solution

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

这篇关于如何使jQuery-UI datepicker显示在屏幕中央?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！