jQuery PopupDialog library - Gnostice/PopupDialog GitHub Wiki

Recently when we were working with HTML5 Document Viewer component we came across the need to display status messages such as error, information, success, progress, etc. without disturbing the flow and without adding any additional controls onto the viewer component itself. We analysed various possibilities and come up with this model where we can keep the look and feel same across all the sub-modules of HTML5 viewer. We also thought of making it a general purpose reusable jQuery library so that anyone can make use of it in their web applications.

PopupDialog library supports the following 5 types of message dialog boxes:

  • WarningMessageBox
  • InfoMessageBox
  • SuccessMessageBox
  • ErrorMessageBox
  • ProgressPopUpBox

The library provides various options to customize the behaviour as per your needs.

PopupDialogs are flexible enough to be displayed at various pre-defined positions on the parent element.

  • TopLeft
  • TopRight
  • BottomLeft
  • BottomRight
  • Center
var warningMessageBox = new gnostice.WarningMessageBox(parentDivObj, "This is a warning message box", true);
warningMessageBox.show(gnostice.Position.CENTER);

In constructor a boolean value decides whether to fade parent content.

hide() method of the popup box takes duration as the parameter. duration determines how long the animation will run.

var warningMessageBox = new gnostice.WarningMessageBox(parentDivObj, "This is a warning message box", true);
warningMessageBox.show(gnostice.Position.CENTER);
setTimeout(function () {warningMessageBox.hide()}, 1000);

You can execute and see the PopupDialog library live on: [JSFiddle]( https://jsfiddle.net/Shivaranjini/p45y0pg8/)

⚠️ **GitHub.com Fallback** ⚠️