我想用JavaScript来实现这一点：当一个对话框弹出时，你只能点击其中一个按钮。网站上的其他功能都不工作了。如果你点击对话框外，它会 Flink 并给你一个错误的声音。我想知道这是否可以用JavaScript实现。我只知道DOM和jQuery。如果这两种方法都不能实现。有没有其他库可以使这种设计成为可能？

$("#dialog-box").hide();
      // Show dialog box when clicking "Add to Cart"
      $("#CTA").on("click", function(){
        $("#dialog-box").fadeIn();
        //Error sound when clicking outside the dialog box
        $("body :not(#dialog-box)").on("click", function play(){
          var audio = document.getElementById("error-sound");
          audio.play();
        })
      });
      // Go to cart when clicking "Go to My Cart"
      $("#go-to-cart").click(function(){
        window.location = "https://www.youtube.com/";
      });
      // Close dialog box when clicking "Continue shopping"
      $("#continue-shopping").on("click", function(){
        $("#dialog-box").fadeOut();
      });

* {
        margin: 0;
      }
      .main-container {
        margin-top: 50px;
        margin-left: 100px;
        width: 300px;
        position: relative;
      }
      .t-shirt-image {
        width: 300px;
      }
      .background-opacity {
        background-color: rgba(250, 247, 247, 0.7);
        border: none;
        height: 120px;
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      #CTA {
        background-color: rgb(194, 192, 192);
        font-size: 20px;
        color: rgb(56, 56, 55);
        padding: 10px 25px;
        border: none;
        border-radius: 5px;
        text-decoration: none;
        transform: all 0.15s;
      }
      #CTA:hover {
        opacity: 0.8;
      }
      #CTA:active {
        box-shadow: 5px 5px 5px rgb(185, 185, 185);
      }
      .discount {
        position: absolute;
        color: white;
        background-color: black;
        padding: 2px 5px;
        top: 8px;
        right: 5px;
      }
      #dialog-box {
        background-color: rgba(123, 121, 121, 0.9);
        width: 400px;
        height: 200px;
        position: absolute;
        top: 100px;
        left: -50px;
        border-radius: 10px;
        text-align: center;
      }
      #dialog-box p {
        margin-top: 50px;
        margin-bottom: 30px;
        font-size: 20px;
        font-family: Georgia, "Times New Roman", Times, serif;
      }
      .button-container{
        display: flex;
        justify-content: space-between;
        margin: 0 12%;
      }
      .button-container button{
        font-family: Georgia, 'Times New Roman', Times, serif;
        padding: 5px 10px;
        border-radius: 3px;
        border: none;
      }
      .button-container button:hover{
        opacity: 0.8;
      }
      .button-container button:active{
        box-shadow: 3px 3px 1px rgb(82, 81, 81);
      }

<div class="main-container">
      <div class="T-shirt">
        <img class="t-shirt-image" src="/images/T-shirt.avif" alt="t-shirt" />
      </div>

      <div class="background-opacity">
        <button id="CTA">Add to Cart</button>
      </div>

      <div class="discount">20% OFF</div>

      <div id="dialog-box" class="dialog-box">
        <p>The prouduct has been added to cart.</p>
        <div class="button-container">
          <button id="go-to-cart">Go to My Cart</button>
          <button id="continue-shopping">Continue Shopping</button>
        </div>
      </div>
    </div>

    <audio id="error-sound" src="/audio/windows-10-error-sound.mp3"></audio>