Create and show only one use dialog built on the basis of global state.

Question

I have a plugin that should show a dialog (Modal) every time the user double-clicks on a word.

Double-click detection is not a problem, but the exact fields / values ​​in the dialog box depend on which word the user clicked on and on some kind of mutable global state. Therefore, I cannot create a dialogue until the moment I need to show it. And here's the problem: how do I do this?

I am using this code now:

var dialogName="uniqueDialog" + counter++;
CKEDITOR.dialog.add(dialogName,function(editor) {
     // Creating dialog here.
    });
CKEDITOR.instances.editor.openDialog(dialogName);

This works, but you need to add a uniquely named dialog, just to show it once, and then a newer use of it again seems really really wrong. I am also afraid that this will continue to use resources as the dialogs are more deleted (I could not find any removal method).

So my question is: is there a better way to dynamically create and show a one-use dialog?

Answer 1

Update:

If bootstrap is not allowed, then perhaps the version of the addFrame dialog is acceptable. This can then refer to an html file that can be loaded from parameters.

NB: plunkr only works if you redo and edit it, otherwise it will give you 404 for the template.

Here is a quick plunkr:

plunky

:

CKEDITOR.plugins.add( 'insertVariable', {
   requires: ['iframedialog'],
  icons: 'insertvariable',
  init: function( editor ) {

    editor.addCommand( 'varDialog', new CKEDITOR.dialogCommand( 'varDialog' ) );

    CKEDITOR.dialog.addIframe('varDialog','varDialog','sample.html?var='+item,500,400);

    editor.ui.addButton( 'insertVariable', {
      label: 'Insert Variable',
      command: 'varDialog',
      icon: this.path + '<insert gif>'
    });

  }
});

, , html, . .

, . , , . .

, , , .

http://getbootstrap.com/javascript/#modals

. , . :

http://getbootstrap.com/javascript/#modals-related-target

. , . CKEDITOR JQuery, , .