如果我在标头中放置自定义 HTML 块并放置我的代码,则会出现该按钮,但该按钮的功能不起作用。如果我将自定义 HTML 放置在页面上任何其他位置的块中,它的功能就非常好。只有当我将它放在标题中时它才会损坏。
通常这不会成为问题,我会将其放置在页面上的某个位置,但客户希望将其放在页眉中。
这里是网站链接:https://canastaging.wpengine.com/
这是我的代码:
<!-- Booking Button-->
<button id="bookingBtn" class="book-button">
Book Now
</button>
<!-- Booking Modal-->
<div id="bookingModal" class="modal" style="display: none;" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
<div class="modal-content" tabindex="0">
<h2 id="modal-title" class="modal-title">
Come Stay with Us!
</h2>
<span class="close" aria-label="Close" role="button" tabindex="0">
×
</span>
<!-- Booking Form-->
<div class="form-group">
<label for="checkin-date">
Check-in Date:
</label>
<input type="date" id="checkin-date">
</div>
<div class="form-group">
<label for="checkout-date">
Check-out Date:
</label>
<input type="date" id="checkout-date">
</div>
<div class="form-group">
<label for="guests">
Number of Guests:
</label>
<input type="number" id="guests" min="1">
</div>
<div class="form-group">
<label for="rooms">
Number of Rooms:
</label>
<input type="number" id="rooms" min="1">
</div>
<button class="submit-button" onclick="redirectToBooking()">
Check Avalibility
</button>
</div>
</div>
<script>
var modal = document.getElementById("bookingModal");
var btn = document.getElementById("bookingBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function () {
modal.style.display = "block";
};
span.onclick = function () {
modal.style.display = "none";
};
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
};
function redirectToBooking() {
var checkinDate = document.getElementById("checkin-date").value;
var checkoutDate = document.getElementById("checkout-date").value;
var guests = document.getElementById("guests").value;
var rooms = document.getElementById("rooms").value;
var redirectUrl =
"https://www.hilton.com/en/book/reservation/rooms/?
ctyhocn=ROCUSUP&" +
"arrivalDate=" +
checkinDate +
"&departureDate=" +
checkoutDate +
"&room" +
rooms +
"NumAdults=" +
guests;
window.location.href = redirectUrl;
}
var focusableEls = modal.querySelectorAll(
'button, [href], input, select, textarea,
[tabindex]:not([tabindex="-1"])'
);
var firstFocusableEl = focusableEls[0];
var lastFocusableEl = focusableEls[focusableEls.length - 1];
modal.addEventListener("keydown", function (e) {
if (e.key === "Tab" || e.keyCode === 9) {
if (e.shiftKey) {
if (document.activeElement ===
firstFocusableEl) {
lastFocusableEl.focus();
e.preventDefault();
}
} else {
if (document.activeElement === lastFocusableEl) {
firstFocusableEl.focus();
e.preventDefault();
}
}
}
});
</script>
<style>
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
}
.modal-content {
position: relative; /* Set this to make sure modal content is
relative inside modal */
background-color: #ffffff;
padding: 30px;
border-radius: 15px;
max-width: 500px;
width: 90%;
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.25);
margin: 0 auto; /* This will help in horizontal centering */
}
.modal-title {
font-size: 24px;
margin-bottom: 25px;
color: #333;
}
.form-group {
margin-bottom: 20px;
display: flex;
flex-direction: column;
}
.form-group label {
margin-bottom: 8px;
color: #555;
}
.form-group input {
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
}
/* Booking Button */
.book-button {
color: #FFF9EB;
border: 2px solid;
padding: 12px 40px;
font-family: "frieghttext-pro-bold";
cursor: pointer;
font-size: 16px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}
.book-button:hover {
background-color: #555;
}
/* The Close Button */
.close {
color: #aaa;
position: absolute;
top: 15px;
right: 15px;
font-size: 30px;
cursor: pointer;
}
.close:hover {
color: #333;
}
/* Submit Button */
.submit-button {
color: #20433D;
border: 1px solid;
padding: 12px 10px;
cursor: pointer;
font-size: 16px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}
.submit-button:hover {
background-color: #555;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.modal-content {
padding: 20px;
}
.modal-title {
font-size: 20px;
}
.book-button,
.submit-button {
padding: 10px 20px;
}
}
</style>
我尝试应用内联样式并使用 !important 标签来强制样式。我想知道是否有一些 JS 覆盖了我的 JS 功能。我无法追踪它,因为控制台在与按钮交互时没有给我任何直接错误。
问题可能是由于
btn
元素导致 onclick 函数被覆盖,您可以通过在控制台中键入以下内容来检查:
btn.onclick
其中“btn”是您的变量名称。
尝试将变量名称更改为其他名称,以防该变量在其他地方使用。
否则尝试直接在 html 标签内调用 onclick 函数:
<button onclick="openModal()">Book Now</button>
//Don't forget to change the function's name :
<script>
function openModal() {
modal.style.display = "block";
};
</script>