Prevent Bootstrap modal automatically showing on Page Load

Question

In my case, I have a bootstrap modal to launch on a button click. But when the page loads, an empty modal opens. How can I prevent this? I tried several methods, sometimes modal not loading on the page load but when the button click it's not open. what is the better solution for that?

below codes I tried

 // $('#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');

Here is the code I call to this Modal,

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

Here is my Modal code,

 <!-- 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 -->

I'm stuck in this problem several days. So thanks in advance if you can help me!

Answer 1

In your JS document ready call you can add .modal('hide') like below:

$( document ).ready(function() {
  $('#myModal').modal('hide')
});

Where '#myModal' is the referance to your modal.

Also make sure you are not calling $('#empDetailsModal').modal('show'); outside of your button click handler.