Dialogs in normal flow and inside a Bootstrap modal

dialogsFade is still supported across the Bootstrap 5 dialog modules. For editors inside a modal, dialogsInBody remains the safer configuration because the dialog markup is attached to the page body.

Inline editor with faded dialogs

Use the link, image, or video buttons to see the fade effect.

Open the link dialog here and notice the Bootstrap fade transition.

Editor inside a modal

This modal initializes Summernote with dialogsInBody: true.

Example configuration - Dialogs

summernote.create('#dialogs-fade-editor', {
  height: 240,
  dialogsFade: true,
  toolbar: [
    ['insert', ['link', 'picture', 'video']],
    ['view', ['codeview']],
  ],
});

summernote.create('#modal-editor', {
  height: 240,
  dialogsInBody: true,
  dialogsFade: true,
  toolbar: [
    ['insert', ['link', 'picture', 'video']],
    ['view', ['codeview']],
  ],
});