Create dialog with custom context menu command

Thank you for Custom-context-menu-command

To add a custom command you must follow this steps:

1) add the name of your custom command on document ready

$().ready(function() {
	var elf = $('#elfinder').elfinder({
		url : 'php/connector.php',
		commands : [
			'custom','open', 'reload', 'home', 'up', 'back', 'forward', 'getfile', 'quicklook', 
			'download', 'rm', 'duplicate', 'rename', 'mkdir', 'mkfile', 'upload', 'copy', 
			'cut', 'paste', 'edit', 'extract', 'archive', 'search', 'info', 'view', 'help', 'resize', 'sort', 'netmount'
		],
		contextmenu : {
			// navbarfolder menu
			navbar : ['open', '|', 'copy', 'cut', 'paste', 'duplicate', '|', 'rm', '|', 'info'],
			// current directory menu
			cwd    : ['reload', 'back', '|', 'upload', 'mkdir', 'mkfile', 'paste', '|', 'sort', '|', 'info'],
			// current directory file menu
			files  : ['getfile', '|', 'custom', 'quicklook', '|', 'download', '|', 'copy', 'cut', 'paste', 'duplicate', '|', 'rm', '|', 'edit', 'rename', 'resize', '|', 'archive', 'extract', '|', 'info']
		},
		
	}).elfinder('instance');
});

2) add the command name your language file

'cmdcustom'      : 'Custom command',

3) create a custom command file (you can copy an existing command from source) and include it in your main html

elFinder.prototype.commands.custom= function() {
          var self  = this,
	  fm    = self.fm,
	  dfrd;

          this.exec = function(hashes) {
                //You can use html tags, javascript, jquery or ajax inside the content variable. 
                content = ` <h1> elFinder </h1>`;

                useDebug = true;
                ndialog = self.fmDialog(content, {
                  title : self.title,
                  width : 600,
                  maxWidth: 'window',
                  maxHeight: 'window',
                  autoOpen : false,
                  resizable : false,
                  destroyOnClose : false,
                  modal     : true,
                  allowMinimize : false,
                  close : function() {
                    if (useDebug) {
                      // If there is an html tag that you use with Ajax, you should remove it here.
                      // Example = $('#htmlId').remove();
                      tabDebug.hide();
                      debugDIV.tabs('destroy');
                    }
                    opened = false;
                  }
               })
               .on('click', function(e) {
                 e.stopPropagation();
               })
               .css({
                 overflow: 'hidden'
               });
               ndialog.elfinderdialog('open', this).height('auto')
          }
          this.getstate = function() {
                //return 0 to enable, -1 to disable icon access
                return 0;
          }
}

4) add a css rule for your command

.elfinder-button-icon-custom { /* css here */ }