防止Bootstrap模式自动显示在页面加载中

如何解决防止Bootstrap模式自动显示在页面加载中

就我而言，我有一个引导模式，可在单击按钮时启动。但是，当页面加载时，将打开一个空模式。我该如何预防？我尝试了几种方法，有时模式加载不会在页面加载时加载，但是单击按钮时无法打开。有什么更好的解决方案？

在我尝试过的代码下方

                    // $('#empDetailsModal').show();
                    // $('.modal-dialog').show();
                    // $('.modal-backdrop').css("display","");

                $('#empDetailsModal').modal('show');
                // $('#empDetailsModal').show();
                // $('.modal').addClass('show');
                // $('.modal-dialog').show()
                // $('.modal-backdrop').removeClass('hide');
                // $('.modal-backdrop').addClass('show');

这是我称为此模式的代码，

//? show employee details of a selected job
$(document).on('click','#empDetailsBtn',function(e) {
    e.preventDefault();

    // $('#clearFilter').val(emp_id+" "+job_id);
    // $('#filterByDate').val(emp_id+" "+job_id);
    // $('#filterByTime').val(emp_id+" "+job_id);

    //window.emp_id = $(this).val();

    const Toast = Swal.mixin({
        toast: true,position: 'top-end',showConfirmButton: false,timer: 3000,})

    $.ajax({
        type: "GET",url: '/job_employee_details',data: {
            job_id: $(this).val()
        }
    })
    .done(function(res) {
        if(res == 'no_data'){
            //console.log(res)
            Toast.fire({
                type: 'error',title: 'No Details!'
            })
        }
        else{
            //console.log(res)
            $.each(res.details,function(index,value) {
                //console.log(window.emp_id);
                    $('#emp_details_table_body').append(
                        "<tr>"+
                        "<td>"+ value.firstname + "</td>" +
                        "<td>"+ value.lastname + "</td>" +
                        "<td>"+ value.category + "</td>" + 
                        "<td>"+ 
                            "<button class='btn btn-danger btn-sm' id='removeJobBtn' emp_id='"+value.emp_id+"' job_id='"+value.job_id+"'>Remove</button>" +  
                        "</td>"
                        +"</tr>"
                    );
                
        // Modal show
                $('#empDetailsModal').modal('show');

            });
        }
    })
    .fail(function(err) {
        console.log('error')    
    });
});

这是我的模态代码，

<!-- Modal -->
      <div class="modal fade" id="empDetailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content" style="width: 750px">
            <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Assigned Employee Details</h5>
            <button type="button" class="close" id="empDetailsModalcloseIcon" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body" id="modal_body">

                <table class="table" style="background: #cccccc08">
                    <thead class="bg-primary">
                      <tr>
                        <th scope="col">Firstname</th>
                        <th scope="col">Lastname</th>
                        <th scope="col">Category</th>
                        <th scope="col">Actions</th>
                      </tr>
                    </thead>
                    <tbody id="emp_details_table_body">
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal" id="empDetailsModalClose">Close</button>
            </div>
        </div>
        </div>
    </div>
    <!-- Modal -->

我在这个问题上停留了几天。因此，请先感谢您能为我提供帮助！

解决方法

在您的JS文档准备调用中，您可以添加model2$results %>% filter(ROC == max(ROC)) eta max_depth gamma colsample_bytree min_child_weight subsample nrounds ROC Sens Spec ROCSD SensSD SpecSD 1 0.3 1 0 0.8 1 0.75 50 0.701109 0.1000325 0.9713885 0.0101395 0.03343579 0.01236701 ，如下所示：

.modal('hide')

$( document ).ready(function() { $('#myModal').modal('hide') }); 是对您的模式的引用。

还要确保您没有在按钮点击处理程序之外调用'#myModal'。