如何在按钮前发送下拉菜单？
问题描述 投票：0回答：1
我有以下html，带有
SweetAlert2Click me!<!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>
问题是
OKCancelvanillajs-datepicker
我试过如下设置
z-index.swal2-confirm {
z-index: -1;
}
.swal2-deny {
z-index: -1;
}
.date-picker-modal {
z-index: 10000;
}
如何发送这些按钮前面的下拉菜单？
1个回答
0
投票
投票
U 可以为要发送到前面的元素设置相对位置。 这个link可能对你有用。
最新问题
- 如何在kali linux终端中打开kali@kali [已关闭]
- 是否有 API 可以了解自定义受众是否已填充？
- 如何将图像放置在我想要的位置？
- 根据column3中的条件删除column1中的重复元素
- 具有独特值的RANDARRAY
- 滚动时 MFC 中的 BitBlt 问题：未绘制新的可见区域
- 在 Flask 3.0 中重写 JSON 编码器，json_encoder 已弃用？
- 如何在 Unity 2D 中从另一个对象的代码更改对象的比例
- 未在 AKS 中显示服务端点，并且标签和选择器不匹配
- C++ 未命名（匿名）命名空间定义
- 如何解析 HTML 电子邮件
- Azure 应用程序网关：更改公共 IP 零停机？
- 如何向Web Speech API添加标点符号？
- 如何在 Spring Boot REST API 中捕获 AccessDeniedException
- 模拟器在 android studio 最新版本中无法工作
- 在未命名的命名空间内外可以有两个具有相同名称的函数吗？
- 子文件夹中的 Ci4 路由
- 是否可以在不触发重组的情况下更改图像可组合项的大小
- 将简单的Python文本编码器转换为.exe文件以便与朋友和家人共享
- 为什么我需要刷新或转到另一个选项卡才能显示该字段？
© www.soinside.com 2019 - 2024. All rights reserved.