Modal dialog in CodeMirror editor

v6
1

Hi, Is there a way to display modal dialog in CodeMirror (like the one shown in the pic ?)
I tried using addWidget() ,but it is messing up the content in the editor. Please let me know if there is a better way to create modal dialog in CodeMirror ?

Modal_dialog_codemirror
Modal_dialog_codemirror2234×1040 95.4 KB

2

Just overlaying some element over the editor is the easiest way to do something like this.

1 Like
3

Thanks. I used addWidget() and used z-index to make sure they don’t mess with editor’s contents.
cm.addWidget({ line: currentLineNum, ch:20 }, modalDialog, true);

Is there a way to center the widget within the viewable area of the editor ? I noticed the add widget() some times places the widget below the viewable area.

4

Don’t use addWidget, since it has no use in this situation. Place your dialog outside of the editor, and possibly use a shared parent element + absolute positioning to position it over the editor.

5

Sure Thanks, I resolved the issue.