Search code examples
javascriptcssbootstrap-4bootstrap-modalapplication-settings

fade animation making my modal fail in windows 10

Hey guys i have an bootstrap modal with fade CSS class.

If you like to see what am i talking about you can check it there : MyProject

So i'll explain it for you step by step.

First of all this page will work like this (its very simple) client will click on the small alert modal which you can see in the link of my project which i gave MyProject and after click of client its will show a modal like this picture :

what is happening when click on small alert modal

and if you can't see this modal after click on button its because of your windows setting (windows performance) if you do right click on this pc (my computer) and than if you click on properties like this :

this pc properties

and after that if you click on Advanced system setting on new window like this :

enter image description here

and again in new window if you click on setting in performance side you'll find the last part which i was talking about like this:

enter image description here

so after click on setting you'll be in Performance option window and in Visual Effects side you can choose 4 option and if you choose Adjust best appearance You are able to see this modal but if you choose Adjust best performance You are not able to see this modal anymore.

Picture of Performance option :

The thing that i want is fix it ( i meant i want to do something to stop failing modal while some client using adjust best performance)

Solution

  • Identified opacity as the root cause to the problem, as depicted in the link.

    To Solve:

    Remove fade class from you modal element and after that run this code:

    $('.modal').on('shown.bs.modal', function () {
   $(this).css("opacity",1);
});