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>

Answer 2

现在 ：

 $(function() { 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) => {}); });

 .swal2-content { z-index: 2!important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.all.js"></script> <script src="https://cdn.jsdelivr.net/npm/moment@2.20.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.js"></script> <link href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>