为什么这个自定义模式不能在我的 WordPress 网站标题上工作？

Question

如果我在标头中放置自定义 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 功能。我无法追踪它，因为控制台在与按钮交互时没有给我任何直接错误。

Answer 1

问题可能是由于

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>