现在,日期选择器的位置是通过 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/
- 单击边栏中红色背景下方的链接之一,应打开一个窗口
- 点击日历图标
- 失败:(
最佳答案
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;
}
关于jquery - 如何让 jQuery-UI 日期选择器显示在屏幕中央?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8842425/