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.

Must Read: An Object to Control Which Acts as a Checkbox or Radio Items

Checkbox Popup and Sound JQuery Plugin Details

Post NameCheckbox Popup Sound JS
Author Namesheikhsadi
CategoryForm Plugins, Popup Plugins
Official PageClick Here | Click Here
Official Websitegithub.com
Publish DateMarch 11, 2021
Last UpdateJuly 13, 2023
DownloadLink Below
LicenseMIT

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

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

See Demo And Download

checkbox-popup-sound-js

Official Website(sheikhsadi): Click Here

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

Related Posts

Google-Translate-Dropdown-Customize-With-Country-Flag

Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…

Bootstrap-Fileinput

HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….

HStack-and-VStack-in-CSS

CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

Your email address will not be published. Required fields are marked *