Bring Editor's Modal to Foreground

rldean1

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?

allan

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

rldean1

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');
                        };
                    });

allan

Interesting. Thank you for sharing that.

Allan

rldean1

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.

allan

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

rldean1

This particular scenario is using Bootstrap 4.

Taylor74

Hi @allan ,

I am running into the same issue as the original question on this post. The z-index modification brings the create/edit box in front of the bootstrap modal, but I am still unable to type in the input box until the bootstrap modal is closed (same issue that raydlevel5 mentioned above).

Sorry if this is answered elsewhere, I searched quite a bit but this was the only thread I could find. Might you have any less "customized" suggestions at this point than what raydlevel5 has come up with? (I am using Bootstrap 3)

Thank you!
Taylor

rf1234

This works with Bootstrap 3; I've been using it frequently for quite some time. I can open only one Bootstrap 3 modal at a time as Allan states above.

So if you only need one data table in a modal at a time this should be relevant for you. If not: This is the time to stop reading!

I also searched for this: div.DTED DTED_Lightbox_Wrapper
But it wasn't in my code anywhere ... I guess it is not relevant if you use the built in Bootstrap 3 modal for the Data Table.

The Editor modal opens neatly in this code as well - on top of the Bootstrap 3 modal. Here are two screenshots:
1. The Bootstrap 3 modal with the Data Table:

2. The Editor popup to create a new entry hitting the "New" button. (It covers the tiny data table completely in this case - but it doesn't matter and of course it isn't like that with bigger Data Tables in larger modals):

This is a button that opens a Data Table in a Bootstrap 3 modal and it also has an Editor instance.

The button to open the modal (button of the parent table "user"):

//custom button to create and edit user addresses
$.fn.dataTable.ext.buttons.userAddress = {
    //only enabled when one row is selected (like edit / delete)
    extend: 'selectedSingle', //alternative would be 'selected' (multiple rows)
    text: 'yourText',
    className: "userAddressButton",
    action: function ( e, dt, button, config ) {
        var selected = dt.row({ selected: true });
        if (selected.any()) {
            $('.userAddressButton').attr(
                {
                    "data-toggle": "modal",
                    "data-target": "#userAddressModal"
                }
            );
            showUserAddressTable();
        }
    }
};

The function with the Editor and the Data Table (part of it). If you are not destroying the data table if it exists - which is not required - make sure you set the "retrieve"
option. In addition - since this is only a small table in a modal - I changed a couple of defaults regarding fixedHeader, paging and the like:

var showUserAddressTable = function() {  
    
    if ( typeof userAddressEditor !== 'undefined' ) {
        userAddressEditor.off('open submitSuccess');
        userAddressEditor.destroy();
    }
    
    if ( typeof userAddressTable !== 'undefined' ) {
        userAddressTable.columns.adjust();
    }

    var userAddressEditor = new $.fn.dataTable.Editor( {
.....
    var userAddressTable = $('#tblUserAddress').DataTable( {
        dom: "Bti",
        fixedHeader: false,
        paging: false,
        retrieve: true,
        colReorder: false,
....

and finally the HTML:

<!--tblUserAddress: User addresses-->
<div class="container">
    <div class="modal fade" id="userAddressModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header" id="userAddressHeader">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" style="text-align:justify"><span class="userAddressHeader"><?php echo $en?("User Addresses"):('Nutzer Adressen');?></span></h4>
                </div>
                <div class="modal-body">        
                    <table id="tblUserAddress" class="table table-striped table-bordered"
                           cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th><?php echo $en?('Type'):('Art');?></th>
                                <th><?php echo $en?('Address Line 1'):('Adresszeile 1');?></th>
                                <th><?php echo $en?('Address Line 2'):('Adresszeile 2');?></th>
                                <th><?php echo $en?('Address Line 3'):('Adresszeile 3');?></th>            
                            </tr>
                        </thead>
                    </table>     
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal"><?php echo $en?('Close'):('Schliessen');?></button>
                </div> 
            </div>
        </div>
    </div>
</div>

You might need this as well in order to make sure Editor is not hidden behind the Bootstrap 3 modal. This code must run before Editor and DT initialization.

//Editor default settings!
$.extend( true, $.fn.dataTable.Editor.defaults, {
    formOptions: {
        main: {
            onBackground: 'none'
        },
        bubble: {
            onBackground: 'none'
        }
    }
});

rf1234

This thread inspired me to come to my solution. Kaustubh did a great job!
https://datatables.net/forums/discussion/comment/127970/#Comment_127970

Taylor74

@rf1234 Thank you!!