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

Feature-rich Modal/Dialog/Notification Library - jQuery madWindow
File Size: 27 KB
Views Total: 151
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() {}
});

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