Modal fade option not applying fade when modal dialog is showing

Bootstrap Studio Help
1

I require a Modal popup on page load, which I do with jquery. However, the Bootstrap documentation suggests one can add a fade option which I have (see image below)

enter image description here

I dragged and dropped the Modal dialog to the bottom of my page (above the footer), then add an ID dialogVault and maybe set fade option (I think).

The code below is the HTML rendered in Chrome Dev console

<div class="modal fade shadow-lg show" role="dialog" tabindex="-1" id="dialogVault" aria-modal="true" style="padding-right: 17px; display: block;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Setup Vault</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span></button></div>
            <div class="modal-body">
                <p style="margin-bottom: 0px">Your Banking Information is stored in a secure vault.</p><label style="padding-top: 16px;"><strong>Create Vault Password</strong></label>
                <div class="input-group" style="padding-bottom: 16px;">
                    <div class="input-group-prepend"><span>Vault Password</span></div><input class="form-control" type="text" id="edtVaultPassword" placeholder="Enter Vault Password" name="edtVaultPassword"></div>
                <div class="input-group" style="padding-bottom: 16px;">
                    <div class="input-group-prepend"><span>Confirm Password</span></div><input class="form-control" type="text" id="edtVaultPassword-1" placeholder="Confirm Vault Password" name="edtVaultPassword"></div>
                <p style="padding-top: 0px"><em>Never share this password with anyone</em></p>
            </div>
            <div class="modal-footer justify-content-around"><button class="btn btn-light" type="button" data-dismiss="modal">Cancel</button><button class="btn btn-primary" type="button">Set Password</button></div>
        </div>
    </div>
</div>

or more consise screenshot

enter image description here

Problem:

According to the bootstrap docs, calling

$('#dialogVault').modal({show: true});

should show the dialog and add the fade option (if present in the root modal container) however it does not fade (see image below) enter image description here

What did I do wrong as this is the component provided by BS studio?

2

I use this script to call the standard Bootstrap Studio modal on page load, and when I set the fade attribute, it fades in and out correctly. The fade itself is rather quick, but it's definitely there.

$(document).ready(function(){ $("#myModal").modal('show'); });