如何让jQuery-UI datepicker出现在我的屏幕中央？
现在，datepicker的位置是通过javascript通过jQuery-UI框架添加的内联css确定的。 我希望将日期选择器放在屏幕中央，而不是根据触发器的位置进行定位。
如何用我自己的东西覆盖jQuery生成的这个定位？ 我甚至有一个jQuery脚本将div放在屏幕中央，但由于脚本被jquery-ui覆盖，它仍然无法正常工作。
这是生成的内联代码：
这是一个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：
CSS：
#datepicker-container{ text-align:center; } #datepicker-center{ display:inline-block; margin:0 auto; }
您可以使用beforeShow的beforeShow属性来设置回调，您可以在其中编写代码以将datepicker置于页面中心。 试试这个
$(selector).datepicker({ beforeShow: function(picker, inst) { //Code to show the datepicker in the center. } });
你可以传入一个beforeShow回调beforeShow你可以在其中执行$(this).css(...) 。 见这里： http ： //jqueryui.com/demos/datepicker/#event-beforeShow
编辑：
如果你想使用你的center函数，那就这样做（注意我之前的目标是错误的元素）：
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; } $(selector).datepicker({ beforeShow: function(input, inst) { // $(inst).center() // not sure if this works $('.ui-datepicker').center() // this should work } });
使用CSS：
#ui-datepicker-div { position: fixed; width: 100px; height: 100px; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; }
将顶部和左侧边距调整为高度和宽度的一半。 确保此CSS位于jQuery UI CSS之前。
我知道桌子现在有点像“不 – 不”，但我发现它为我排序了问题：
老线程但谷歌仍然很高。 这就是我回答的原因。
在你的datepicker js文件中找到它。
inst.dpDiv.css({position: ($.datepicker._inDialog && $.blockUI ? "static" : (isFixed ? "fixed" : "absolute")), display: "none", left: offset.left + "px", top: offset.top + "px"});
并改为：
inst.dpDiv.css({position: ($.datepicker._inDialog && $.blockUI ? "static" : (isFixed ? "fixed" : "absolute")), display: "none", left: "50%", top: "25%", transform: "translateX(-50%)"});
然后，您将在屏幕中心位于距离顶部25％的位置。
编辑：
您可以尝试将内联日期选择器固定在屏幕中央，具体如下：
#ui-datepicker-div{ position: fixed; top: 50%; left: 50%; z-index: 9999; -webkit-transform : translateX(-50%) translateY(-50%); -moz-transform : translateX(-50%) translateY(-50%); -ms-transform : translateX(-50%) translateY(-50%); transform : translateX(-50%) translateY(-50%); }
然后在打开时显示它并将其隐藏在关闭/选择上。
我试图找到一个已经为我做这个的插件，我找到了这个： https ： //codecanyon.net/item/date-picker-in-fullscreen-jquery-plugin/20224980这是基于Bootstrap Date Picker，可能值得一试