Bring Editor's Modal to Foreground

Bring Editor's Modal to Foreground

rldean1rldean1 Posts: 141Questions: 66Answers: 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: 61,451Questions: 1Answers: 10,055 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

  • rldean1rldean1 Posts: 141Questions: 66Answers: 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: 61,451Questions: 1Answers: 10,055 Site admin

    Interesting. Thank you for sharing that.

    Allan

  • rldean1rldean1 Posts: 141Questions: 66Answers: 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: 61,451Questions: 1Answers: 10,055 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

  • rldean1rldean1 Posts: 141Questions: 66Answers: 1

    This particular scenario is using Bootstrap 4. :smiley:

  • Taylor74Taylor74 Posts: 7Questions: 2Answers: 0

    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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited April 2020

    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'
            }
        }
    });
    
  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

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

  • Taylor74Taylor74 Posts: 7Questions: 2Answers: 0

    @rf1234 Thank you!!

This discussion has been closed.