JQuery Plugin For Popups and Sound In a Checkbox

Checkbox popup and Sound is a small script from jQuery that enables the checkbox to toggle a notification popup and play a sound when selected. Ideal for I Agree on checkboxes, which inform visitors that your terms or legal agreements have been approved.

if checkbox is checked javascript, play sound javascript, how to display checked checkbox value in javascript, html play sound on button click

How to make use of it:

1. Add your content to the popup box.

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

2. Add a sound impact to the web page.

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

3. Apply your personal types to the popup box.

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

4. Load the required jQuery library within the doc.

<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)

checkbox checked javascript, javascript play sound on event, Checkbox popup sound Plugin/Github


See Demo And Download

Official Website(sheikhsadi): Click Here

This superior jQuery/javascript plugin is developed by sheikhsadi. For extra Advanced Usages, please go to the official website.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

Star-Rating-JavaScript

Select Box Based Star Rating JavaScript Library | star-rating.js

star-rating.js is a small JavaScript library to create a customizable and gradually improved star rating control from a regular tick box with numeric values. The ES6 module…

Bootstrap-Show-Notification

Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

Bootstrap Notification is an easy-to-use jQuery plugin that uses the Bootstrap Alerts component to create static, rejectable, and stackable notification popups in the upper right corner of the…

Stackable-Multi-level-Sidebar-Menu

Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav

Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps the infinite nesting of submenu…

bootstrap-5-bs-toaster

A Bootstrap 5 Toast Notification Framework Library | bs-toaster

bs-toaster is simple to instantiate bs-toaster and create multiple toasts effortlessly using native Bootstrap 5! Feature Facts Small and clean Modern browser support. No IE sorry 💥…

Skeleton-Screen-Loading-In-Pure-CSS

How to Create a Skeleton Screen Loading In Pure CSS

Skeleton Screen CSS is a complete set of elements for a hierarchical screen consisting of pure CSS. The source includes scss and compiled thumbnail and non-thumbnail CSS…