Highly Customizable Dialog Component – dmuka.Popup

Preview:

Description:

dmuka.Popup is a lightweight JavaScript dialog component for displaying themeable, customizable modal-like dialog popups on the webpage.

How to use it:

Include the main JavaScript and CSS files on the page.

<link rel="stylesheet" href="main.css">
<script src="main.js"></script>

Include a theme of your choice on the page.

<link rel="stylesheet" href="theme-blue.css">
<link rel="stylesheet" href="theme-dark.css">
<link rel="stylesheet" href="theme-gray.css">
<link rel="stylesheet" href="theme-green.css">
<link rel="stylesheet" href="theme-yellow.css">
<link rel="stylesheet" href="theme-red.css">

Create a new dmuka.Popup instance and customize the dialog with the following options.

new dmuka.Popup({
    // parent container
    // default: the whole body
    parent: document.body,
    // theme name
    theme: "",
    // additional class(es)
    classes: "",
    // trigger dispose function when the dialog closed
    autoDisposeOnClose: true,
    // width/height of the dialog
    width: "50%",
    height: "50%",
    // specify the position of the dialog
    positionX: "center",
    positionY: "middle",
    
    window: {
      classes: "" // CSS class(es) for the dialog
    },
    // CSS class(es) for the dialog header
    header: {
      classes: "",  // CSS class(es) for the dialog header
      text: "", // header text
      enable: true // enable/disable the dialog header
    }
    content: {
      classes: "", // CSS class(es) for the dialog content
      htmlOrChild: "" // dialog content
    },
    footer: {
      classes: "", // CSS class(es) for the dialog footer
      buttons: [ ], // custom buttons
      enable: true  // enable/disable the dialog footer
    },
    closeButton: {
      classes: "", // CSS class(es) for the close button
    }
    
})

Open the dialog.

instance.open()

Callback functions.

new dmuka.Popup({
    onLoad: function () {
        // this = popup
        var popupContent = this.DOM.content.get();
        console.log(popupContent, "My Content - onLoad");
    },
    onOpen: function () {
        // this = popup
        var popupContent = this.DOM.content.get();
        console.log(popupContent, "My Content - onOpen");
        console.log("Trigger open event");
    },
    onClose: function () {
        // this = popup
        var popupContent = this.DOM.content.get();
        console.log(popupContent, "My Content - onClose");
        console.log("Trigger close event");
    },
    onSubmitFooter: function (id) {
        // this = popup
        var popupContent = this.DOM.content.get();
        console.log(popupContent, "My Content - onSubmitFooter");
        var footerButtonId = id;
        console.log("Clicked : " + footerButtonId + " ID Button");
    }
})

More API methods.

// close the dialog
instance.close()
// clean the data
instance.dispose()