Bring Editor's Modal to Foreground

Bring Editor's Modal to Foreground

raydlevel5raydlevel5 Posts: 96Questions: 42Answers: 1

I'm using Bootstrap's modal pop-up option to open a DataTable. This DataTable has an Editor instance associated with it.

The table opens in Bootstrap's modal pop-up just fine.

However, if I perform a New, Create, or Delete action, the Editor's pop-up shows behind the table pop-up.

Does anybody know a way to force the Editor pop-up to be in the foreground above all other modals?

Is this something as simple as setting some sort of "class" at editor.on( 'open', function ( e, type ), or something like that?

Answers

  • allanallan Posts: 50,737Questions: 1Answers: 7,581 Site admin

    Are you using Editor's own modal or the integrated Bootstrap one? Bootstrap only allows a single modal at a time with its own control, so if you wanted multiple modals on screen at a time you'd need to use Editor own modal.

    You can ensure it has a high z-index to appear on top of other things using:

    div.DTED DTED_Lightbox_Wrapper {
      z-index: 65000;
    }
    

    Allan

  • raydlevel5raydlevel5 Posts: 96Questions: 42Answers: 1

    Okay, so setting the css for div.DTED_Lightbox_Wrapper is an option, but I can't interact with the Editor form inputs, probably because Bootstrap's modal "still has control", and I would need to research that.

    I'd like to share with you and everyone else the strategy I came up with... It's probably stupid (and highly customized for my particular situation), but here it is:

    1) I destroy the table when the main modal is closed:

                        $("#universalModal").on("click", "button", function (e) {
    
                            // if the main bootstrap modal was explicitly closed
                            if (e.currentTarget.className == 'close') {
                                // destroy the table
                                if ($.fn.DataTable.isDataTable('#tblCluster')) { tblCluster.destroy(true) };
                            };
                        });
    

    2) If creating or removing a record, NOT inline editing, I expect an Editor form, so I hide the main modal

                        }).on('open', function (e, mode, action) {
                            // hide the Bootstrap modal to allow Editor form visibility
                            if (action == 'create' || action == 'remove') {
                                $("#universalModal").modal('hide');
                            };
    

    3) If the Editor form was closed, either manually, or through internal workings, go back to the main modal

                        }).on('close', function (e) {
                            // if the main modal is missing the show class, then show it
                            if (!$("#universalModal").hasClass('show')) {
                                $("#universalModal").modal('show');
                            };
                        });
    
  • allanallan Posts: 50,737Questions: 1Answers: 7,581 Site admin

    Interesting. Thank you for sharing that.

    Allan

  • raydlevel5raydlevel5 Posts: 96Questions: 42Answers: 1

    Hey @allan

    So...... I've run into the another problem, and I can't figure it out... Note: I'm using the Bootstrap-integrated forms.

    My example above kinda works, but the .modal-open class is being removed from body by something internal in Editor, I think.

    During the .on('close', function () event, I use .modal('show') to re-open the original modal. This is supposed to automatically add .modal-open to body, but I think something else in Editor is taking over...

    Basically, I can't get .modal-open to "stick" to body after Editor closes its own forms.

    What's the best way for me to re-open or call my original modal? How do I wait for the Editor close operations to be fully completed before I call my original modal $(#universalModal").modal('show') again?

    Note: I tried to listen for something like $("body").on('hidden.bs.modal', '.modal.DTED', function (e) {}, but I think that Editor is totally removing its own forms from the DOM completely, so the event never bubbles up anywhere.

  • allanallan Posts: 50,737Questions: 1Answers: 7,581 Site admin

    Are you using Bootstrap 3 or 4? I've been working on an update for different issue which I think should also help here.

    Thanks,
    Allan

  • raydlevel5raydlevel5 Posts: 96Questions: 42Answers: 1

    This particular scenario is using Bootstrap 4. :smiley:

Sign In or Register to comment.