Hi Mark,

Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.

I see what you mean, thank you for both pages to make it easier for us to see the issue.

We are using Astra a lot during our testing, and we haven't had any issues so far;  but I guess we perhaps did not try to create exactly the same Modal as you are duing here.

When it comes to modal conflicts like this, we did not have an issue exactly like this yet;

but there have been a couple of cases where a specific Modal from Page Builders was having the same CSS class as our own Table modals, which creates a conflict.

The solution was to add Custom JS script which works around it, but we had to find what are the modal classes of the user custom modal first.

Could you please let me know which Page builder did you use to create this Modal and did you add a custom class or ID to the Modal;

then if you can allow us remote Admin access, so our developers can try to resolve this?

Please provide me a temporary WP-admin (administrator) user for your site where this happens, so we could log in and take a look ‘from the inside’ as that’s the most efficient way to see and resolve the issue. 

We do not interfere with any data or anything else except for the plugin (in case that’s a production version of the site), and of course, we do not provide login data to third parties. 

You can write credentials here just check PRIVATE Reply so nobody can see them except us.

Hello Mark.

Milos is out of the office this week, so I'll jump in.

Can you please provide us with the host address for FTP, along with the port? (in a Private response again, of course)

The ticket has been forwarded to our developers and as soon as I hear from them I'll get back to you.

Hi again Mark.

During the troubleshooting process, we may need to alter wpDataTables' code, which is a lot faster (and safer) via FTP than going through the Plugin Editor (if it is even available).

As Milos mentioned previously, Astra is used frequently during our testing and we were unable to replicate the issue you're describing, which indicates the issue lies somewhere on your website and local testing will not provide any results.

I mentioned that the ticket was already forwarded to our developers, but I can't say when (or if) they'll be able to troubleshoot it thoroughly without FTP access.

Thank you, Mark.

It's been forwarded to our developers and as soon as I hear from them, I'll get back to you.

Hello Mark.

Sorry for the delay.

The issue is coming from loading these scripts, which are bootstrapped:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

When that's removed, your modal doesn't work but wpDataTables' modal does.

Since you're using Bootstrap version higher than ours, you will need to change it to be 3.3.7. This is an approximation of your modal:

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Modal Example</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        This is a Bootstrap modal. You can put whatever content you want here.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

Then, in wpDataTables' Settings, under Custom JS you would need to add this:

(function ($) {
    $(function () {
jQuery('.example.modal').on('shown.bs.modal', function (e) {
            e.stopImmediatePropagation()
            e.stopPropagation()
            jQuery(this).attr('style', 'display: block !important;');
            jQuery('body').attr('style', 'overflow-y: hidden !important;');
            jQuery(this).addClass('in')
            jQuery(this).find('#firma').focus()
        }).on('hidden.bs.modal', function (e) {
            //
        }).on('show.bs.modal', function (e) {
            e.stopImmediatePropagation()
            e.stopPropagation()
            jQuery(this).removeClass('in')
            jQuery(this).attr('style', 'opacity: 0 !important;');
            jQuery('body').attr('style', 'overflow-y: hidden !important;');
        })
        jQuery('.example.modal .modal-header button.close').on('click',function (e){
            e.stopImmediatePropagation()
            e.stopPropagation()
            jQuery('.example.modal').removeClass('in')
            jQuery('.example.modal').attr('style', 'display: none !important');
            jQuery('body').attr('style', 'overflow-y: scroll !important;');
        });
        jQuery(document).on('keyup', '.example.modal', function (e) {
            e.preventDefault();
            e.stopImmediatePropagation();
            if (e.which == 27) {
                jQuery(this).removeClass('in')
                jQuery('.example.modal').attr('style', 'display: none !important');
                jQuery('body').attr('style', 'overflow-y: scroll !important;');
            }
        });
        jQuery('.example.modal').click(function(ev){
            if(ev.target != this) return;
            jQuery(this).removeClass('in')
            jQuery('.example.modal').attr('style', 'display: none !important');
            jQuery('body').attr('style', 'overflow-y: scroll !important;');
        });
        });

You would need to add all the functions that you need, as this is just a suggestion (approximate code) so you need to add the functions for buttons and everything else that you need.

Our developers added this to your website, so the page "with-table" is changed, and it's added in Custom JS and CSS in wpDataTables settings. Please check it out.