javascript - Tempus-dominus 和 sweetalert2

Question

我用 sweetalert2 创建了一个模式输入字段是来自 tempusdominus 的日期选择器小部件但日历显示在模态按钮后面，如下图所示:

我的代码如下:

Swal.fire({
   title: 'Pay',
   html: '<input type="text" name="payment_day" class="datetimepicker-input swal2-input" autocomplete="off" data-toggle="datetimepicker" data-target="#payment_day" id="payment_day">',
   showCancelButton: true,
   confirmButtonColor: '#3085d6',
   cancelButtonColor: '#d33',
   confirmButtonText: 'Confirm',
   cancelButtonText: 'Cancel',
   onOpen: function () {
     $('#payment_day').datetimepicker({
       format: 'L'
     });
   },
}).then((result) => {});

Answer 1

虽然您可以将样式应用于 .swal2-content，但不推荐这样做，因为 .swal2-content 是内部类名，它可以随时更改(不太可能，但仍然如此)。

处理此问题的正确方法是使用 customClass 参数添加带有 z-index 的自定义类:

Swal.fire({
  customClass: {
    popup: 'my-swal',
    content: 'my-swal-content'
  }
})

.my-swal .my-swal-content {
  z-index: 2
}

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>