Почему модальные формы, открытые с помощью метода JS show, показывают уродливое модальное окно?

Привет, У меня есть страницы с пользовательским дизайном html/css/jquery, на которых модальные формы открываются несколько необычным для меня способом: не с помощью JS-кода, а в виде ссылок:

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

HTML: и форма входа:

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

HTML: я пытаюсь переделать его и открыть JS-код, так как мне нужно прочитать некоторые данные из базы данных с помощью ajax, когда я открываю модальную форму. Я пытаюсь сделать то же самое с кодом JS, используя метод .show:

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

HTML:

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

Код (JavaScript): модальная форма открывается, но выглядит некрасиво и не по центру. Пожалуйста, откройте сайт по адресу http://photographers.my-demo-apps.tk/

и попробуйте нажать кнопки «Ввод/Поиск» в правом верхнем углу: https://prnt.sc/26kr0wp

Какие методы мне следует использовать и как это можно исправить?

Спасибо!