如何在HTMLDialogElement.showModal()中让jquery-ui-datepicker显示在弹窗上层？

你遇到的这个问题确实挺棘手的——showModal()打开的dialog会进入浏览器的顶层栈（Top Layer），这个栈里的元素（包括dialog本身和它的::backdrop伪元素）优先级远高于普通页面元素，所以直接给datepicker加z-index根本没用，因为它不在这个顶层栈里。不过不用换show()，我们有办法让datepicker"挤进"顶层栈里：

核心方案：把Datepicker容器移到Dialog内部 #

jQuery UI Datepicker默认会把日历容器追加到<body>上，这就导致它属于普通页面层级，被顶层栈的dialog挡住。我们可以通过datepicker的配置选项，把它的容器移到dialog内部，这样它就属于顶层栈的一部分，再调整z-index就能显示在最上层了。

步骤1：修改Datepicker的挂载目标 #

使用datepicker的beforeShow钩子，在日历弹出前把它的容器移到当前dialog内部：

$("#your-date-input").datepicker({
  beforeShow: function(input, inst) {
    // 找到当前的dialog元素，把datepicker容器追加进去
    const currentDialog = $(input).closest("dialog")[0];
    $(inst.dpDiv).appendTo(currentDialog);
  }
});

步骤2：给Datepicker设置足够高的z-index #

dialog的::backdrop伪元素默认z-index通常在1000左右，我们给datepicker设置一个比它更高的值，确保能覆盖backdrop：

.ui-datepicker {
  z-index: 1001 !important; /* 数值可以根据实际情况调整 */
}

为什么这个方案有效？ #

当datepicker成为dialog的子元素后，它就和dialog一起处于浏览器的顶层栈中，此时z-index的规则就会在这个栈内部生效——只要datepicker的z-index比::backdrop高，就能显示在模态框和遮罩层的上方，同时还能保持showModal()带来的模态交互阻断特性（弹窗外内容依然无法交互）。

额外注意事项 #

• 如果页面中有多个dialog，closest("dialog")会自动找到当前input所在的dialog，不用担心混淆。
• 如果你的datepicker是动态生成的，这个beforeShow钩子依然会生效，因为它是在每次弹出日历前触发的。

内容的提问来源于stack exchange，提问作者hhsadiq