## Modal You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1] ```js const editor = grapesjs.init({ modal: { // options } }) ``` Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance ```js const modal = editor.Modal; ``` ## Available Events * `modal:open` - Modal is opened * `modal:close` - Modal is closed * `modal` - Event triggered on any change related to the modal. An object containing all the available data about the triggered event is passed as an argument to the callback. ## Methods * [open][2] * [close][3] * [isOpen][4] * [setTitle][5] * [getTitle][6] * [setContent][7] * [getContent][8] * [onceClose][9] * [onceOpen][10] ## open Open the modal window ### Parameters * `opts` **[Object][11]** Options (optional, default `{}`) * `opts.title` **([String][12] | [HTMLElement][13])?** Title to set for the modal * `opts.content` **([String][12] | [HTMLElement][13])?** Content to set for the modal * `opts.attributes` **[Object][11]?** Updates the modal wrapper with custom attributes ### Examples ```javascript modal.open({ title: 'My title', content: 'My content', attributes: { class: 'my-class' }, }); ``` Returns **this** ## close Close the modal window ### Examples ```javascript modal.close(); ``` Returns **this** ## onceClose Execute callback when the modal will be closed. The callback will be called one only time ### Parameters * `clb` **[Function][14]** Callback to call ### Examples ```javascript modal.onceClose(() => { console.log('The modal is closed'); }); ``` Returns **this** ## onceOpen Execute callback when the modal will be opened. The callback will be called one only time ### Parameters * `clb` **[Function][14]** Callback to call ### Examples ```javascript modal.onceOpen(() => { console.log('The modal is opened'); }); ``` Returns **this** ## isOpen Checks if the modal window is open ### Examples ```javascript modal.isOpen(); // true | false ``` Returns **[Boolean][15]** ## setTitle Set the title to the modal window ### Parameters * `title` **([string][12] | [HTMLElement][13])** Title ### Examples ```javascript // pass a string modal.setTitle('Some title'); // or an HTMLElement const el = document.createElement('div'); el.innerText = 'New title'; modal.setTitle(el); ``` Returns **this** ## getTitle Returns the title of the modal window ### Examples ```javascript modal.getTitle(); ``` Returns **([string][12] | [HTMLElement][13])** ## setContent Set the content of the modal window ### Parameters * `content` **([string][12] | [HTMLElement][13])** Content ### Examples ```javascript // pass a string modal.setContent('Some content'); // or an HTMLElement const el = document.createElement('div'); el.innerText = 'New content'; modal.setContent(el); ``` Returns **this** ## getContent Get the content of the modal window ### Examples ```javascript modal.getContent(); ``` Returns **([string][12] | [HTMLElement][13])** [1]: https://github.com/GrapesJS/grapesjs/blob/master/src/modal_dialog/config/config.ts [2]: #open [3]: #close [4]: #isopen [5]: #settitle [6]: #gettitle [7]: #setcontent [8]: #getcontent [9]: #onceclose [10]: #onceopen [11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [13]: https://developer.mozilla.org/docs/Web/HTML/Element [14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function [15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean