grapesjs/docs/api/modal_dialog.md

Modal

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

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

const modal = editor.Modal;

• open
• close
• isOpen
• setTitle
• getTitle
• setContent
• getContent
• onceClose
• onceOpen

open

Open the modal window

Parameters

• opts Object Options (optional, default {})
  • opts.title (String | HTMLElement)? Title to set for the modal
  • opts.content (String | HTMLElement)? Content to set for the modal
  • opts.attributes Object? Updates the modal wrapper with custom attributes

Returns this

close

Close the modal window

Returns this

onceClose

Execute callback when the modal will be closed. The callback will be called one only time

Parameters

• clb Function

Returns this

onceOpen

Execute callback when the modal will be opened. The callback will be called one only time

Parameters

• clb Function

Returns this

isOpen

Checks if the modal window is open

Returns Boolean

setTitle

Set the title to the modal window

Parameters

• title string Title

Examples

modal.setTitle('New title');

Returns this

getTitle

Returns the title of the modal window

Returns string

setContent

Set the content of the modal window

Parameters

• content (string | HTMLElement) Content

Examples

modal.setContent('<div>Some HTML content</div>');

Returns this

getContent

Get the content of the modal window

Returns string