Bootstrap 4 - Modal. Working in Edge, not in Chrome or Firefox

This example which is using the example from the website, works perfectly in Edge. Both the remote call or HTML injection options in the javascript works.

In Chrome, the screen greys over button onclick, and HTML injection method and remote injection method works but the modal is not displayed.

CSS shows in _modal.scss: .Modal { display: None; }

...and in_transitions.scss: .fade:not(.show) { opacity: 0; }.

If I remove these two properties i see the modal.

In Firefox, same as Chrome.

Javascript:

<script>

    $( '#exampleModal' ).on( 'show.bs.modal', function ( e ) {

        var button = $( e.relatedTarget );
        var modal = $( this );

        // load content from HTML string
        modal.find( '.modal-body' ).html( "Nice modal body baby..." );
        console.log( button.data( "url" ) );
        // or, load content from value of data-remote url
        //modal.find('.modal-body').load(button.data("url"));

    } );

</script>

Modal

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Button

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" style="margin-bottom: 10px" data-url="@Url.Action("_ClientDetails", new { PolicyTransactionNo = Model.PolicyTransactionNo })">
View Client Details
</button>