Bootstrap Modal: Class="modal Fade" Causing Problems

I am trying to get a bootstrap modal tutorial to work in my view.ejs file. But the class='modal fade' seems to be causing a problem. If I remove the class='modal fade' the modal pe

Solution 1:

Not sure if anyone will read this, but we had this problem with a few users (not all users).

Turns out it was related to this css, which activates when you turn off window animations at the OS level:

    @media (prefers-reduced-motion: reduce) {
        .modal.fade .modal-dialog {
            transition: none;
        }
    }

Removing this from bootstrap made modals work with the 'fade' class for users experiencing issue.

More on the media query here:

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

Obviously removing the query is not ideal for people with reduced motion switched on.

Solution 2:

There might be something wrong you are doing, create your own fiddle and share it here.! I used your code, and its working fine! I just added the modal and fade classes to it, and it opens only when I click on the button

https://jsfiddle.net/happy2deepak/e5aukzge/

<buttontype="button"class="btn btn-info btn-lg"data-toggle="modal"data-target="#myModal">Open Modal</button><!-- Modal --><divid="myModal"class="modal fade"role="dialog"><divclass="modal-dialog"><!-- Modal content--><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal">&times;</button><h4class="modal-title">Modal Header</h4></div><divclass="modal-body"><p>Some text in the modal.</p></div><divclass="modal-footer"><buttontype="button"class="btn btn-default"data-dismiss="modal">Close</button></div></div></div></div>