Why modal forms opened with JS show method shows ugly modal ?

[mstdmstd]

Hello,
I have pages with custom  html/css/jquery design and where modal forms are opened in somewhat uncommon way for me :
not with JS code, but as links :
 

                        <a href="#modal-signin" class="header__signIn" data-modal><span>BUTTON TO OPEN LOGIN MODAL</span></a>

and login form :
 

    <div id="modal-signin" class="modal modal-signin">
        <div class="modal-title">
            LOGIN
        </div>
        <div class="form-signin">
            <form action="">

I try to remake it and to open it JS code, as I need to read some data from db with ajax when I open modal form.
I try to make the same with JS code using .show method :

<a  onclick="modalSigninOpen(); return false;" class="header__search">
    <svg width="15" height="15">
        <use xlink:href="/img/sprite.svg#search"></use>
    </svg>
</a>
...


    function modalSigninOpen() {
        console.log('modalSigninOpen::')
        $('#modal-signin').show();
    }

modal form is opened, but looks ugly and not centered.
Please open site at http://photographers.my-demo-apps.tk/
and try to click on Enter/Search buttons at right top : https://prnt.sc/26kr0wp

Which methods have I to use and how that can be fixed ?

Thanks!

[requinix]

If the modal is powered by a jQuery plugin then you need to be using the plugin's own methods to open the modal - by which I mean something that will probably look similar to $('#modal-signin').modal('show') - not simply manually .show()ing it.