[英]Tempus-dominus and sweetalert2
我用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) => {});
雖然您可以將樣式應用於.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>
現在 :
$(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"/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.