Blank Screen On Close Of Modal Appears Sometimes

I have a dynamically created table with buttons in each row...If I click on the button a modal opens to enter the details with dark screen behind modal..On Click of accept button t

Solution 1:

Usually, when a modal is shown a backdrop or wrapper (dark screen) is also shown behind it. Try removing that backdrop in your function like this:

$(document).on('click','.accept', function(e){
     $(".modal-fade").modal("hide");
     $(".modal-backdrop").remove();
)}

Solution 2:

You are applying code with wrong class selector,

<div class="modal fade" id= "{{pl.id}}_1" role="dialog" data-id="{{pl.id}}">

Check in above line, modal fade are two different classes. And you are using it as one in your jquery code. like this:

$(".modal-fade").modal("hide");

So try with changing it with proper class name. Here you go:

$(".modal").modal("hide");

Solution 3:

I Have tried the above solution but after closing the popup using above method you will not be able to get popup again. When you again click on the button to show popup it will show you a black screen

Below solution works for me precisely.

   $("#myModal .close").click();

   $("#myModal .close").trigger("click");