Feature-rich Modal/Dialog/Notification Library - jQuery madWindow

Feature-rich Modal/Dialog/Notification Library - jQuery madWindow
File Size: 35.5 KB
Views Total: 507
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A simple and lightweight jQuery plugin to create animated, customizable, multifunctional modals, lightboxes, dialogs, notifications popups with minimal effort.

Key Features:

  • Custom title & content
  • 6 placement options.
  • Auto dismiss after a timeout similar to the Toast.
  • 6 built-in popup themes.
  • Allows to load content from within the document.
  • Supports cookies. Ideal for user-friendly popup boxes or cookie consent dialog.

How to use it:

1. To get started, insert jQuery library and the madWindow plugin's files into the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/scripts/jQuery.madWindow.min.js"></script>
<link rel="stylesheet" href="/path/to/dist/styles/jQuery.madWindow.min.css" />

2. Create a basic dialog box that displays in the middle of the screen.

$(window).madWindow("open",{
  messageTitle: "Basic Dialog",
  messageContent: "Dialog Content"
});

3. Create an alert dialog box with an OK button that slides from the bottom of the screen. All possible behaviors:

  • autoCenter (default)
  • bottomCenter
  • topRight
  • bottomRight
  • topLeft
  • bottomLeft
$(window).madWindow("open",{
  messageTitle: "Basic Dialog",
  messageContent: "Dialog Content",
  messageButtonShow: true,
  behavior: "bottomCenter"
});

4. Create a toast message that will auto dismiss after 3 seconds. All possible themes:

  • default
  • alert
  • info
  • error
  • confirm
  • no-chrome
$("#toast").on('click', function () {
  $(window).madWindow("open",{
    messageTitle: "Toast",
    messageContent: "Toast Message Here",
    theme: "alert",
    behavior: "topRight",
    closeTimeout: 10,
    width: 400
  });
});

5. Create a confirm dialog and load content from inline HTML.

<div id="confirm-content" class="mad-window" style="display: none">
  <div class="container">
    <div class="mad-window-title">Confirm Dialog.</div>
    <div class="mad-window-content">
      <p>Are You Sure?</p>
      <div class="mad-window-actionButton">OK</div>
      <div class="mad-window-cancelButton">Cancel</div>
    </div>
  </div>
</div>
$("#confirm-content").madWindow("open",{
  theme: "confirm",
  behavior: "bottomCenter"
});
$("#confirm-content .mad-window-actionButton").click(function () {
  $("confirm-content").madWindow("close");
});

6. Possible close button themes:

  • no-close
  • hanging-close
  • hairline-close
  • thick-close
  • black-close
  • heavy-close
  • rounded-close
  • blades-close
  • warp-close
  • fat-close
$(window).madWindow("open",{
  messageTitle: "Basic Dialog",
  messageContent: "Dialog Content",
  theme: "alert fat-close"
});

7. All default configuration options and callback functions.

$(window).madWindow("open",{
  messageTitle: null,
  messageContent: null,
  messageButtonShow: false,
  messageButtonLabel: "Ok",
  theme: "default",
  behavior: "autoCenter",
  cookieName: "mad-cookie",
  expireDays: 0,
  width: 400,
  closePadding: 0,
  speed: 500,
  modal: false,
  modalClose: false,
  modalSpeed: 250,
  disableScroll: false,
  disableMethod: "auto",
  openDelay: 0,
  closeTimeout: 0,
  openCallback: function() {},
  closeCallback: function() {},
  hiddenCallback: function() {}
});

Changelog:

2021-06-10

v1.0.2 (2021-05-12)

  • New callback for hidden windows

v1.0.2 (2021-05-12)

  • Implements Same Site attribute and accommodates multiple windows with different settings.

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