Modal

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

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;

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
• close
• isOpen
• setTitle
• getTitle
• setContent
• getContent
• onceClose
• onceOpen

open

Open the modal window

Parameters

• opts Object (opens new window) Options (optional, default {})

  • opts.title (String (opens new window) | HTMLElement (opens new window))? Title to set for the modal
  • opts.content (String (opens new window) | HTMLElement (opens new window))? Content to set for the modal
  • opts.attributes Object (opens new window)? Updates the modal wrapper with custom attributes

Examples

modal.open({
  title: 'My title',
  content: 'My content',
  attributes: { class: 'my-class' },
});

Returns this

close

Close the modal window

Examples

modal.close();

Returns this

onceClose

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

Parameters

• clb Function (opens new window) Callback to call

Examples

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 (opens new window) Callback to call

Examples

modal.onceOpen(() => {
 console.log('The modal is opened');
});

Returns this

isOpen

Checks if the modal window is open

Examples

modal.isOpen(); // true | false

Returns Boolean (opens new window)

setTitle

Set the title to the modal window

Parameters

• title (string (opens new window) | HTMLElement (opens new window)) Title

Examples

// 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

modal.getTitle();

Returns (string (opens new window) | HTMLElement (opens new window))

setContent

Set the content of the modal window

Parameters

• content (string (opens new window) | HTMLElement (opens new window)) Content

Examples

// 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

modal.getContent();

Returns (string (opens new window) | HTMLElement (opens new window))