Full width home advertisement

Post Page Advertisement [Top]

bootstrapissuemodal

Click not working after closing the bootstrap modal

Click not working after closing bootstrap modal
Life of programmers is filled up with the full of issues. Every day we are facing lots of issues, some of them are simple but too weird, today I came up with the weird but simple issue is the click not working after closing bootstrap modal on the webpage. Without wasting time let's see the solution.

Why click not working after closing the bootstrap modal? 


Click not working after closing bootstrap modal because you are just hiding the modal UI not actual bootstrap modal. Bootstrap modal creates the overlay behind the modal so when you close the modal at that time it's just closing the UI but actually, overlay remains onto the page. 

That's why overlay catches the mouse event and stop you to firing event on the page. So for the solution, we need to remove the overlay from the page after closing the bootstrap modal.

First Solution:

If you are using the custom own method for closing bootstrap then please use the bootstrap's in build method for closing the modal.


         $('#myModal').modal('hide');

    


ADDITIONAL READING ON KRAZZYCODES
  1. ERROR: Cookies are blocked or not supported by your browser
  2. How to remove custom post type taxonomy base from URL in WordPress?
  3. How to download YouTube video easily?
  4. WordPress contact form not working issue
  5. Google Map not showing in WordPress backend - ACF plugin


Second Solution:

If your issue still alive, then do not worry about that. I have a better solution. Check out the following screenshot. When you close bootstrap modal at the time following code should be removed from the page. But if it's still there after closing the modal then we should remove it manually.

Figure 2. Backdrops in bootstrap modal

Just put the following code where you want to hide the bootstrap modal. Please do not forget to change the ID of modal. I hope it will solve your issue definitely.


        $('#myModal').modal('hide');
        $(document).find('.modal-backdrop').remove();
    

If you still facing issues, then let me know via comment.
Don’t be too selfish please do like, comment or share it.
Thank you for reading this post.

No comments:

Post a Comment

Bottom Ad [Post Page]