Highly Customizable Dialog Component – dmuka.Popup

Category: Javascript , Modal & Popup | December 6, 2018
Author: muhammet-kandemir-95
Views Total: 52
Official Page: Go to website
Last Update: December 6, 2018
License: MIT

Preview:

Highly Customizable Dialog Component – dmuka.Popup

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

You Might Be Interested In:

Leave a Reply