在 HTMLDialogElement.showModal() 上添加 jquery-ui 日期选择器（绕过伪背景）

Question

问题

输入元素位于 HTML 的

<dialog>

标签中，showModal 用于以模态方式打开对话框。有没有办法在对话框顶部打开 jquery-ui-datepicker。现在，它隐藏在对话框后面

传统答案

传统的答案是在日期选择器上添加 z-index，但由于 ::backdrop pseduo-element 而无法工作。

HTMLDialogElement.showModal 阻止所有其他交互

根据定义，

HTMLDialogElement.showModal()

会阻止除对话框之外的所有交互。

HTMLDialogElement 接口的 showModal() 方法将对话框显示为模式，位于可能存在的任何其他对话框的顶部。它与 ::backdrop 伪元素一起显示在顶层。对话框外部的交互被阻止，并且对话框外部的内容呈现惰性。

有没有办法将日期选择器置于顶部？

可能的技巧

当然我们可以使用 HTMLDialogElement.show() ，它可以解决问题，但是有没有办法在使用 showModal() 时强制选择器置于顶部。

Answer 1

有同样的问题并写了一些解决方法：

const datePickerContainer = $('.myDatePicker');
const dialogParent = datePickerContainer.parents('dialog');

if (dialogParent.length > 0) {
    const widget = datePickerContainer.datepicker( "widget" );
    widget.detach();
    dialogParent.append(widget);
}

我检查目标字段是否在对话框内，并在日期选择器初始化后将日期选择器小部件移动到其中。