0

I would like to achieve this with JavaScript: When a dialog pops up, you can only click one of the buttons on it. All other functions on the website is not working any more. If you click outside the dialog box, it will flash and gives you an error sound. I wonder if this is achievable with JavaScript. I only know DOM and jQuery. If this is not achievable with these two methods. Are there any other libraries that can make this design possible?

      $("#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>
Lixin Li
  • 45
  • 7
  • Share your code. What have you tried so far? – Robin Hood Feb 22 '23 at 10:19
  • Take a look at [Bootstrap's modal with static backdrop](https://getbootstrap.com/docs/5.0/components/modal/#static-backdrop). If you want to add a sound effect, take a look at [this question](https://stackoverflow.com/questions/18826147/javascript-audio-play-on-click). – Tom Feb 22 '23 at 10:57
  • I posted my code. The sound is on when I click on .main-container. If I click on the rest of the body, the sound doesnt appear any more. – Lixin Li Feb 22 '23 at 12:19

2 Answers2

1

you can linsten the body click ,when the click is fire in the html ,you can print the currentTarget and target to do you want to do ,or use date-* property to check whether the dom is you want to care,hope can help you;hits: this is about event catch and bubble

Cognia
  • 437
  • 3
  • 10
  • Hi, I posted my code. Do you mind having a look? I tried to add an event listner on "body :not(#dialog-box)", but the effect is weird : when I click on .main-container, the sound is on. If I click on the rest of the body, nothing happens – Lixin Li Feb 22 '23 at 12:22
  • @LixinLi https://stackoverflow.com/questions/31012129/selector-not-in-jquery-not-working this may solve your problem, i meet you problem ,then i search *jquery not selector not working* then ,the first google item is the answer;some times google the right core word is a superpower^ _ ^ – Cognia Feb 22 '23 at 13:23
  • I saw this question. I also tried :not(). However, :not() only goes to the next layer. When I use ".main-container :not('#dialog-box')", it excludes the dialog-box. However, when I use "body :not('#dialog-box')", it doesn't exclude #dialog-box, but ".main-container". Is there any CSS selector that can exclude the element no matter how many layers there are in bewteen? – Lixin Li Feb 23 '23 at 11:05
  • you problem become this: when click the screen beside the dialog-box ,you will fire a event to do something such as alert the audio?@LixinLi – Cognia Feb 23 '23 at 14:14
  • may be you can use `$(body).not(function).on(click,....)`,and the usage of function you can refer to http://api.jquery.com/not/, do some check – Cognia Feb 23 '23 at 14:48
0

The best way for this project is to create a middle-layer between the body and the dialogue box. I set an opacity to the layer. Then in JS, the son is on when the middle layer is clicked. Since the dialog box is on the top of the layer, when I click on it, the click is trigger on the dialog box instead of middle layer. Thus, there isn't any sound

Lixin Li
  • 45
  • 7