How to use the bootstrap.native.Modal function in bootstrap

ui.core.mapObject.on('click_control', (evt) => {
                const control = evt.frameState.control;
                const modalElm = ui.core.mapDivDocument.querySelector('.modalBase');
                const modal = new bsn.Modal(modalElm, {'root': ui.core.mapDivDocument});
                if (control == 'copyright') {
                    const from = ui.core.getMapMeta();

                    if (!META_KEYS.reduce((prev, curr) => {
                        if (curr == 'title') return prev;
                        return from[curr] || prev;
                    }, false)) return;

                    ui.core.mapDivDocument.querySelector('.modal_title').innerText = ui.core.translate(from.officialTitle || from.title);
                    META_KEYS.map((key) => {
                        if (key == 'title' || key == 'officialTitle') return;
                        if (!from[key] || from[key] == '') {
                            ui.core.mapDivDocument.querySelector(`.${key}_div`).classList.add('hide');
                        } else {
                            ui.core.mapDivDocument.querySelector(`.${key}_div`).classList.remove('hide');
                            ui.core.mapDivDocument.querySelector(`.${key}_dd`).innerHTML =

function createModal(frameSelector, title, body, submitText) {
  return new bsn.Modal(frameSelector, {
    content:
    '<div class="modal-header">'
    +'<button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span></button>'
    +'<h4 id="gridModalLabel" class="modal-title">'+title+'</h4>'
    +'</div>'
    +'<div class="modal-body">'
    + body
    +'</div>'
    +'<div class="modal-footer">'
    +'<button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>'
    +'<button data-loading-text="Loading..." class="btn btn-primary" type="button">'+submitText+'</button>'
    +'</div>'
  });
}

componentDidMount() {
    this.bsModal = new bsn.Modal(this.modal);
  }

case 'y':
                            restore.position[line[0]] = parseFloat(line[1]);
                            break;
                        case 'sb':
                            restore.showBorder = parseInt(line[1]) ? true : false;
                            break;
                        case 'hm':
                            restore.hideMarker = parseInt(line[1]) ? true : false;
                            break;
                        case 'hl':
                            restore.hideLayer = line[1];
                            break;
                        case 'c':
                            if (ui.core) {
                                const modalElm = ui.core.mapDivDocument.querySelector('.modalBase');
                                const modal = new bsn.Modal(modalElm, {'root': ui.core.mapDivDocument});
                                modal.hide();
                            }
                    }
                });
                if (!ui.core) {