2

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 the modal closes and the dark screen must disappear..It disappears sometimes and not in other situations. This is how my screen appears sometimes after click of accept button in modal
Screen that appears : https://i.stack.imgur.com/wWnS8.jpg

<td>
<!-- for accepting -->
<button type="button" class="btn btn-default btn-sm tick" data-toggle="modal" data-target="#{{pl.id}}_1" ><i class="fa fa-check" aria-hidden="true" style="color:green" onclick="remainingChar()"></i></button>
 <!-- Modal -->
 <div class="modal fade" id= "{{pl.id}}_1" role="dialog" data-id="{{pl.id}}">
     <div class="modal-dialog">
     <!-- Modal content-->
         <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title">Do You want to accept <b>{{pl.employee.emp_name|title }} </b> leave?</h4>
             </div>
             <form action={% url 'm_manage:accept' %}  method="POST">
             {% csrf_token %}
               <div class="modal-body">
                  <p><input type="checkbox" name="email" id="email" class="email" > Notify Via Email<br></p>
                  <p><label for="message">Message</label>
                  <textarea rows="3" name="message" id="message"  class="form-control input-md message" ></textarea></p>
                  <div id="textarea_feedback_{{pl.id}}" class="textarea_feedback"></div>
                </div>
                <div class="modal-footer">
                   <button type="button" class="btn btn-success accept" data-dismiss="modal" onclick="checkLength(this)" >Accept</button>
                   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </form>
          </div>
       </div>
     </div>
    </td>

In my Jquery:

 $(document).on('click','.accept', function(e){
 $(".modal-fade").modal("hide");
  )}
divya
  • 315
  • 1
  • 5
  • 15

3 Answers3

7

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();
)}
Navjot Ahuja
  • 1,141
  • 7
  • 10
  • This works for me in-so-far-as removing the backdrop, but the screen is now locked in position and scrolling is disabled. – roganjosh Aug 09 '19 at 09:21
  • Remove the overflow css attribute from the container (body etc) – Navjot Ahuja Aug 09 '19 at 09:44
  • The advice [here](https://stackoverflow.com/questions/11519660/twitter-bootstrap-modal-backdrop-doesnt-disappear) fixed it; `$('body').removeClass('modal-open');` – roganjosh Aug 09 '19 at 09:46
  • Just if anybody is having the same problem: My problem was to call 'hide' although the modal wasn't shown. To avoid this I put the hide cmd in an if, like this: `if($('#myPopup').hasClass('in')) {$('#myPopup').modal('hide');}` This solves my blackscreen problem – phil Mar 30 '21 at 05:12
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");
Himanshu Upadhyay
  • 6,558
  • 1
  • 20
  • 33
  • @divya, this was the case for black overlay not going away? Did this solve the issue? – Himanshu Upadhyay Sep 14 '17 at 09:34
  • Thank You!! I considered your point and used .modal....but it doesn' solve the issue....using $(".modal-backdrop").remove() as mentioned by @navjotahuja92 solved the issue – divya Sep 14 '17 at 09:39
  • oh, ok @divya. happy to help. – Himanshu Upadhyay Sep 14 '17 at 09:46
  • You *should* be using the modal() methods to show/hide as they do more than just `.hide()`. For anyone in the future with the same issue, `$(".modal").modal("hide")` is the correct way to hide a boostrap modal. – freedomn-m Sep 14 '17 at 10:04
0

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");
Anuj Tiwari
  • 121
  • 1
  • 9