Full-featured Modal Dialog Plugin - jQuery NkDialog

NkDialog is a simple, flexible, customizable, AJAX-enabled jQuery Modal Dialog plugin which is able to use for any kind of web project.

Main features:

• Dynamic modal content (header, body, footer).
• Fade animation.
• Image background.
• Prevents page scroll when the modal is activated.
• Custom close button.
• Variable modal sizes.

How to use it:

1. Load the latest version of jQuery and the NkDialog plugin's files in the html.

<link href="dist/NkDialog.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" 
        integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" 
        crossorigin="anonymous">
</script>
<script src="dist/NkDialog.js"></script>

2. Create a trigger element to toggle the modal dialog.

<button class="nkdialog">Launch The Modal</button>

3. Call the function on the trigger element and specify the header/body/footer content.

$('.nkdialog').NkDialog({
  data: {
    header: 'Modal Header',
    content: 'Modal Content',
    footer: 'Modal Footer'
  }
});

4. You can also pass the options via the data-nkdialog attribute.

<button class="nkdialog"
        data-nkdialog='{"data":{"content":"Modal Content"}}'>
        Launch The Modal
</button>

5. Determine whether to show/hide the modal header/body/footer.

$('.nkdialog').NkDialog({
  display : {
    header  : true, // (boolean)
    content : true, // (boolean)
    footer  : true  // (boolean)
  },
});

6. Get content from an external data source via AJAX requests.

$('.nkdialog').NkDialog({
  ajax : {
    url      : false,               // (boolean|string)
    target   : '.nkdialog-content', // (string)
    response : false,               // (boolean) output console
    status   : false,               // (boolean) sameAs
    xhr      : false                // (boolean) sameAs
  },
});

7. Customize the background overlay of the modal dialog.

$('.nkdialog').NkDialog({
  bg : {
    disabled  : false,            // (boolean)
    color    : 'rgba(0,0,0,0.7)', // (string)
    image    : '',                // (string)
    style    : ''                 // (string)
  },
});

8. Enable/disable the fade animation.

$('.nkdialog').NkDialog({
  animate : {
    effect   : '', // (string) '', 'fade'
    duration : 250 // (number)
  },
});

9. Customize the modal size.

$('.nkdialog').NkDialog({
  size : {
    maxWidth   : '640px', // (string) px, rem, vw, vh
    maxHeight  : '50vh',  // (string) px, rem, vw, vh
    fullSize   : false,   // (boolean) overwrite maxWidth and maxHeight
    fullWidth  : false,   // (boolean) overwrite maxWidth
    fullHeight : false    // (boolean) overwrite maxHeight
  }
});

10. More configuration options.

$('.nkdialog').NkDialog({

  // Dialog popup content id
  ids : {
    container : 'nkdialog-container', // (string)
    wrapper   : 'nkdialog-wrapper',   // (string)
    section   : 'nkdialog-section',   // (string)
    wrap      : 'nkdialog-wrap',      // (string)
    header    : 'nkdialog-header',    // (string)
    title     : 'nkdialog-title',     // (string)
    content   : 'nkdialog-content',   // (string)
    footer    : 'nkdialog-footer',    // (string)
    close     : 'nkdialog-close',     // (string)
    bg        : 'nkdialog-bg'         // (string)
  },

  // Default CSS classes
  classes : {
    skin   : 'origin',          // (string)
    opened : 'nkdialog-opened', // (string) add class in the body tag
    fixed  : 'nkdialog-fixed'   // (string) sameAs
  },

  // parse html from the target element
  target : {
    header   : '.nkdialog-header',   // (string)
    content  : '.nkdialog-content',  // (string)
    footer   : '.nkdialog-footer',   // (string)
    close    : '.nkdialog-close'     // (string)
  },

  // close button
  close : {
    offset : 'inner' // (string) 'inner' or 'outer'
  },

  // scroll event
  scroll : {
    fixed : true // (boolean)
  },

  // active event
  onoff : {
    delegate          : 'a',   // (string) '' or tag, id and class name is possible
    preventDefault    : false, // (boolean)
    click             : true,  // (boolean)
    destroy           : false, // (boolean)
    resize            : true,  // (boolean)
    resized           : false, // (boolean)
    orientationchange : false  // (boolean)
  }
  
});

11. Callback functions available.

$('.nkdialog').NkDialog({

  on : {
    initialize           : null, // (function) e, el, opts
    initialized          : null, // (function) e, el, opts
    resize               : null, // (function) e, el, opts
    resized              : null, // (function) e, el, opts
    orientationchange    : null, // (function) e, el, opts
    destroy              : null, // (function) e, el, opts
    open                 : null, // (function) e, el, opts
    openAnimate          : null, // (function) e, el, opts
    openStepAnimate      : null, // (function) e, el, opts
    openProgressAnimate  : null, // (function) e, el, opts
    openCompleteAnimate  : null, // (function) e, el, opts
    openStartAnimate     : null, // (function) e, el, opts
    openDoneAnimate      : null, // (function) e, el, opts
    openFailAnimate      : null, // (function) e, el, opts
    openAlwaysAnimate    : null, // (function) e, el, opts
    close                : null, // (function) e, el, opts
    closeAnimate         : null, // (function) e, el, opts
    closeStepAnimate     : null, // (function) e, el, opts
    closeProgressAnimate : null, // (function) e, el, opts
    closeCompleteAnimate : null, // (function) e, el, opts
    closeStartAnimate    : null, // (function) e, el, opts
    closeDoneAnimate     : null, // (function) e, el, opts
    closeFailAnimate     : null, // (function) e, el, opts
    closeAlwaysAnimate   : null  // (function) e, el, opts
  }
  
});

Changelog:

2019-05-29

• Fixed ajax loading is not working

---

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