Not working inside a datatable in responsive or mobile mode

[WeAreJustIt]

The modal opens normally when it is on a normal screen on the pc, but when it enters responsive mode, the modal does not open when it is activated from a button that is inside a dataTable

<div class="tab-pane" id="profile1" role="tabpanel">
                    <div class="row">
                        <div class="col-12">
                            <div class="table-responsive">
                                <table id="datatable" class="table table-bordered dt-responsive "
                                    style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                    <thead>
                                        <tr>
                                            <th style="width: 40px;">#</th>
                                            <th >Motorista</th>
                                            <th style="width: 40px;">CPF</th>
                                            <th style="width: 90px;">Check-Out</th>
                                            <th >Checkout</th> 
                                            <th >Destino</th> 
                                            <th >Motivo</th>
                                            <th >Ação</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <% for(var i = 0 ; i < historico.length ; i++) { %>
                                            <tr>
                                                <th ><%= historico[i].codigo_locacao %></th>
                                                <td>
                                                   <%= historico[i].nome %> 
                                                </td>
                                                <td><%= historico[i].doc %></td>
                                                <td><%= historico[i].checkin %></td>
                                                <td><%= historico[i].checkout %></td>
                                                <td><%= historico[i].local %></td>
                                                <td><%= historico[i].motivo %></td>
                                                <td> 
                                                    <a href="/registra-despesa-veiculo?vei=<%= historico[i].hash_veiculo %>&mot=<%= historico[i].hash_motorista %>&loc=<%= historico[i].hash_locacao %>" class="mr-3 text-primary" data-toggle="tooltip"
                                                    data-placement="top" title="" > 
                                                        <button type="button" class="btn btn-success waves-effect waves-light">
                                                             + Despesa
                                                        </button>
                                                    </a>
                                                </td>
                                            </tr>
                                        <% } %>

                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>

and the form that should open

 <div class="card mfp-hide mfp-popup-form mx-auto" id="ver-baixa">
                            <div class="card-body">
                                <h4 class="mt-0 mb-4">Dados da Baixa</h4>
                                <form>
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label for="name">Motorista</label>
                                                <input type="text" class="form-control" id="nomeBaixada" disabled>
                                            </div>
                                        </div>
                                        <div class="col-lg-2">
                                            <div class="form-group">
                                                <label for="valor">Valor</label>
                                                <input type="text" class="form-control" id="valorBaixada" disabled>
                                            </div>
                                        </div>
                                        <div class="col-lg-2">
                                            <div class="form-group">
                                                <label for="valor">Data/Hora gerada</label>
                                                <input type="text" class="form-control" id="dataBaixada" disabled>
                                            </div>
                                        </div>
                                        <div class="col-lg-2">
                                            <div class="form-group">
                                                <label for="valor">Despesa</label>
                                                <input type="text" class="form-control" id="despesaBaixada" disabled>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">

                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label for="name">Operador</label>
                                                <input type="text" class="form-control" id="operadorBaixada" disabled>
                                            </div>
                                        </div>
                                        <div class="col-lg-2">
                                            <div class="form-group">
                                                <label for="valor">Data/Hora pagamento</label>
                                                <input type="text" class="form-control" id="dhBaixada" disabled>
                                            </div>
                                        </div>

                                    </div>

                                    <br>

                                    <div class="row">

                                        <div class="col-6">
                                            <div>
                                                <h5 class="mt-0 font-size-14">Comprovante</h5>
                                                <a download="" id="link-img" href="" title="Comprovante">
                                                    <img alt="teste" id="img-img"  src="" width="75" >
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>

As you can see from the screenshot, when the screen is normal it opens normally

But when it stays in responsive size, it doesn't open