Display A Popup And Play A Sound When A Checkbox Is Checked

A tiny jQuery script that enables a checkbox to toggle a notification popup and play a sound when checked.

Ideal for I Agree checkboxes, which informs visitors that your terms or legal agreements have been got consent.

How to use it:

1. Add your content to the popup box.

<div class="popup-content" style="display: none;">
  ... popup content ...
</div>

2. Add a sound effect to the page.

<audio class="audiofile">
  <source src="sound/bell.mp3" type="audio/mpeg">
</audio>

3. Apply your own styles to the popup box.

.popup-content {
  width: 400px;
  position: fixed;
  bottom: 50%;
  right: 30px;
  display: block;
  z-index: 999;
}

4. Load the necessary jQuery library in the document.

<script src="/path/to/cdn/jquery.min.js"></script>

5. Enable your checkbox input to toggle the popup box.

<input type="checkbox" name="checkbox" id="click-button"> I Agree

(function ($) {
  $('#click-button').change(function () {
    if (this.checked) {
      $('.popup-content').show(function () {
        setTimeout(function () {
          $(".popup-content").fadeOut(2000);
        }, 6000);
      });
      $('.audiofile')[0].play();
    } else {
      $('.popup-content').hide();
    }
  });
})(jQuery)

---

This awesome jQuery plugin is developed by sheikhsadi. For more Advanced Usages, please check the demo page or visit the official website.