CKEditor 5 Link Popup not displaying inside Bootstrap 4 Modal

Question

I've designed some Bootstrap 4 Modal inside that I've implemented CKEditor 5. My problem is when I try to open link then link popup does not display. I've searched in google found some fix but still not working as expected.

I've used this css codes but it only displays the popup. And it also only works on single modal not in all modal.

.ck.ck-balloon-panel.ck-balloon-panel_arrow_nw.ck-balloon-panel_visible.ck-balloon-panel_with-arrow {
  z-index: 100009 !important;
}

I've also added data-focus="false" in bootstrap 4 modal then its works but in only single modal not all modal.

This is my page This is the page

This is my add modal Add modal

Edit modal on the same page Edit modal on the same page

And I've another modal on another pages.

This is how I initialized the CKEditor

var allEditors = document.querySelectorAll(".editor");
for (var i = 0; i < allEditors.length; ++i) {
  ClassicEditor.create(allEditors[i], {
    toolbar: {
      items: ["heading", "|", "fontFamily", "bold", "italic", "underline", "link", "bulletedList", "numberedList", "fontSize", "|", "indent", "outdent", "alignment", "strikethrough", "subscript", "superscript", "fontBackgroundColor", "fontColor", "highlight", "horizontalLine", "|", "imageUpload", "imageInsert", "blockQuote", "insertTable", "mediaEmbed", "undo", "redo", "code", "codeBlock", "exportPdf", "htmlEmbed"],
    },
    language: "en",
    image: {
      toolbar: ["imageTextAlternative", "imageStyle:full", "imageStyle:side", "linkImage"],
    },
    table: {
      contentToolbar: ["tableColumn", "tableRow", "mergeTableCells", "tableCellProperties", "tableProperties"],
    },
    licenseKey: "",
  })
    .then((editor) => {
      window.editor = editor;
    })
    .catch((error) => {
      console.error("Oops, something went wrong!");
      console.error("Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:");
      console.warn("Build id: ha29xos85yrd-s3u39n3nfb0l");
      console.error(error);
    });
}

And this is my Bootstrap 4 Modal

<!-- Add new department modal start -->
<div class="modal fade" id="add_department_modal" data-focus="false" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="add_department_modal" aria-hidden="true">

  <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
    <div class="modal-content">
      <form action="#" method="post" id="add_department_form" novalidate>
        <div class="modal-header bg-primary text-light">
          <h5 class="modal-title" id="add_department_modal">Add New Department</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body px-4">

          <div class="form-group">
            <label for="dep_title">Department Title</label>
            <input type="text" name="title" id="dep_title" class="form-control form-control-lg rounded-0" placeholder="Enter Department Title" required>
            <div class="invalid-feedback">Department title can't be blank!</div>
          </div>

          <div class="form-group">
            <label for="dep_slug">Department Slug</label>
            <input type="text" name="slug" id="dep_slug" class="form-control form-control-lg rounded-0" placeholder="Enter Department Slug" required>
            <div class="invalid-feedback">Department slug can't be blank!</div>
          </div>

          <div class="form-group">
            <label for="dep_content">Department Content</label>
            <textarea name="content" id="dep_content" class="form-control form-control-lg rounded-0 editor" placeholder="Write Department Content Here..." rows="5" required></textarea>
            <div class="invalid-feedback">Department content can't be blank!</div>
          </div>

          <div class="form-group">
            <label for="dep_status">Department Status</label>
            <select name="status" id="dep_status" class="form-control form-control-lg rounded-0" required>
              <option value="" selected disabled>--Select--</option>
              <option value="1">Public</option>
              <option value="0">Private</option>
            </select>
            <div class="invalid-feedback">Department status can't be blank!</div>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary btn-lg rounded-0" data-dismiss="modal">Close</button>
          <input type="submit" value="Save" class="btn btn-primary btn-lg rounded-0" id="add_department_btn">
        </div>

      </form>

    </div>
  </div>
</div>
<!-- Add new department modal end -->

Answer 1

In order to get it to work in my system, I followed the guide from the ckeditor docs.

To address the first issue, add the following styles to your application:

/*
 * Configure the z-index of the editor UI, so when inside a Bootstrap
 * modal, it will be rendered over the modal.
 */
:root {
    --ck-z-default: 100;
    --ck-z-panel: calc( var(--ck-z-default) + 999 );
}

Pass the focus: false option to the Bootstrap modal() function to fix the second issue:

$( '#modal-container' ).modal( {
    focus: false
} );

Answer 2

I had the same issue myself. It turned out that the link popup was staying behind the Bootstrap modal because of x-index styling. I added

.ck-body-wrapper{
    z-index: 10000;
}

snippet in my syles