I have the following html with a SweetAlert2 date picker popup for the Click me! button:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/datepicker-bs5.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/notie/dist/notie.min.css">
<style>
.my-footer {
background-color: #163b65;
color: #ffffff;
margin-top: 1.5em;
height: 5em;
padding: 1em;
font-size: 80%;
}
.room-image {
max-width: 50%;
}
.redText {
color: red;
}
.notie-container {
box-shadow: none;
}
.swal2-confirm {
z-index: -1;
}
.swal2-deny {
z-index: -1;
}
.date-picker-modal {
z-index: 10000;
}
</style>
<!-- Other things -->
<title>My nice page</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<!-- <a class="nav-link active" aria-current="page" href="/">Home</a> -->
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<!-- <a class="nav-link" href="/about">About</a> -->
<a class="nav-link" href="/about.html">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Rooms
</a>
<ul class="dropdown-menu">
<!-- <li><a class="dropdown-item" href="/rooms/generals-quarters">General's Quarters</a></li>
<li><a class="dropdown-item" href="/rooms/colonels-suite">Colonel's Suite</a></li> -->
<li><a class="dropdown-item" href="generals.html">General's Quarters</a></li>
<li><a class="dropdown-item" href="colonels.html">Colonel's Suite</a></li>
<li><hr class="dropdown-divider"></li>
<!-- <li><a class="dropdown-item" href="/rooms/paupers-shack">Pauper's Shack</a></li> -->
<li><a class="dropdown-item" href="paupers.html">Pauper's Shack</a></li>
</ul>
</li>
<li class="nav-item">
<!-- <a class="nav-link" href="/make-reservation">Make Reservation</a> -->
<a class="nav-link" href="reservation.html">Make Reservation</a>
</li>
<li class="nav-item">
<!-- <a class="nav-link" href="/contact">Contact</a> -->
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<h1 class="mt-5">Search for Availability</h1>
</div>
</div>
<!-- Second date picker -->
<form action="reservation.html" method="get" class="needs-validation" novalidate id="date-picker">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3">
<div class="mb-3">
<label for="start-date" class="form-label">Starting Date</label>
<input required autocomplete="off" type="text" class="form-control" name="start-date" id="start-date" aria-describedby="start-date-help">
<small id="start-date-help" class="form-text text-muted">Enter your starting date</small>
</div>
</div>
<div class="col-md-3">
<div class="mb-3">
<label for="end-date" class="form-label">Ending Date</label>
<input required autocomplete="off" type="text" class="form-control" name="end-date" id="end-date" aria-describedby="end-date-help">
<small id="end-date-help" class="form-text text-muted">Enter your ending date</small>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3">
<button type="submit" class="btn btn-primary">Search Availability</button>
</div>
</div>
</form>
<!-- Other -->
<div class="row">
<div class="col">
<p id="myParagraph">
This is some text
</p>
<p>
<button id="colorButton" class="btn btn-outline-secondary">
Click me!
</button>
</p>
</div>
</div>
</div>
<!-- Footer -->
<div class="row my-footer">
<div class="col">
Left
</div>
<div class="col">
Middle
</div>
<div class="col">
Right
</div>
</div>
<!-- Bootstrap bundle JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!-- scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/datepicker-full.min.js"></script>
<script src="https://unpkg.com/notie"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
let attention = Prompt();
document.getElementById("colorButton").addEventListener("click", function(){
let html = `
<form action="" method="get" class="needs-validation" novalidate id="date-picker-modal">
<div class="row">
<div class="col-md">
<div class="mb-3">
<input disabled required autocomplete="off" type="text" class="form-control" name="start-date" id="start-date-modal" aria-describedby="start-date-help" placeholder="Start">
</div>
</div>
<div class="col-md">
<div class="mb-3">
<input disabled required autocomplete="off" type="text" class="form-control" name="end-date" id="end-date-modal" aria-describedby="end-date-help" placeholder="End">
</div>
</div>
</div>
</form>
`;
attention.custom({msg: html, title: 'Choose your dates', width: 400});
});
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
// vanilla JS date picker
const elem = document.getElementById('date-picker');
const rangepicker = new DateRangePicker(elem, {
// ...options
format: 'dd-mm-yyyy',
});
// notie alert
function notify(msg, msg_type){
notie.alert({
type: msg_type,
text: msg,
stay: false,
time: 3,
position: 'top'
});
};
function notifyModal(title, text, icon, confirmButtonText){
Swal.fire({
title: title,
text: text,
icon: icon,
confirmButtonText: confirmButtonText
});
};
// Prompt
function Prompt(){
let toast = function(c){
const {
msg = '',
icon = 'success',
position = 'top-end',
} = c;
const Toast = Swal.mixin({
toast: true,
title: msg,
position: position,
icon: icon,
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
});
Toast.fire({});
};
let success = function(c){
const {
msg = '',
title = '',
footer = '',
} = c;
Swal.fire({
icon: 'success',
title: title,
text: msg,
footer: footer
})
};
let error = function(c){
const {
msg = '',
title = '',
footer = '',
} = c;
Swal.fire({
icon: 'error',
title: title,
text: msg,
footer: footer
})
};
let custom = async function(c){
const {
title = '',
msg = '',
width = '',
} = c;
const { value: formValues } = await Swal.fire({
title: title,
html: msg,
width: width,
backdrop: false,
focusConfirm: false,
showCancelButton: true,
scrollbarPadding: false,
willOpen: () => {
const elem = document.getElementById('date-picker-modal');
const rangepicker = new DateRangePicker(elem, {
format: 'dd-mm-yyyy',
showOnFocus: true,
});
},
preConfirm: () => {
return [
document.getElementById('start-date-modal').value,
document.getElementById('end-date-modal').value
]
},
didOpen: () => {
document.getElementById('start-date-modal').removeAttribute('disabled'),
document.getElementById('end-date-modal').removeAttribute('disabled'),
document.getElementById('date-picker-modal').style.overflow = "hidden"
}
});
if (formValues) {
Swal.fire(JSON.stringify(formValues))
};
};
return {
toast: toast,
success: success,
error: error,
custom: custom,
}
};
</script>
</body>
</html>
The issue is that the OK and Cancel buttons are obstructing the vanillajs-datepicker. As seen here:
I have tried setting the z-index as follows, but it doesn’t work.
.swal2-confirm {
z-index: -1;
}
.swal2-deny {
z-index: -1;
}
.date-picker-modal {
z-index: 10000;
}
What can I do to send the dropdown in front of these buttons?
ADDENDUM
I copy Limon’s sample code, and realize that the issue has something to do with await. When that is used, his code also has the date picker obstructed by the button. Still need further digging.
3
Answers
OK, so the following is required to fix the issue:
The hard part is tracking down this elusive
swal2-actionselement, figuring out that its z-index being overwritten, and preventing that from happening. The outcome can be seen below.awaitis needed to acquire the user input, and it's not going away.U can set relative position for element that you want to send to front.
This link maybe usefull for you.
You need to set
z-index: 2on.swal2-html-container, I’d recommend this way: