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

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>

HTML:

and login form :

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

HTML:

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>
...

HTML:

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

Code (JavaScript):

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!

 

You have SO many problems on that site that a centering issue with modals 1) isn't the least bit surprising, and 2) would not be an easy fix given how bloated the code is, how it top to bottom tells non-visual users to go plow themselves, and in general is a laundry list of how NOT to build a website.

MOST of which stems from the mind-numbingly stupid garbage that is jQuery and jQuery UI.

Endless pointless DIV for nothing, endless pointless classes for NOTHING, it's basically using twice or more the HTML that should be used to do that; on top of the utter and total lack of semantics.

I mean, just take your modal dialog for the login...

   <div id="modal-signin" class="modal modal-signin">
        <div class="modal-title">
            Вход
        </div>
        <div class="form-signin">
            <form action="">
                <div class="form-group">
                    <input type="text" name="login" id="login_email" class="form-control" placeholder="Еmail или телефон" required>
                </div>
                <div class="form-group">
                    <input type="password" name="password" id="login_password" class="form-control" placeholder="Пароль" required>
                </div>

                <div class="form-group form-submit flex justify-center">
                    <button type="button" class="btn btn-submit" onclick="makeLogin()">
                        Войти
                    </button>
                </div>
                <div class="signin-social">
                    <div class="signin-social__title">Войти через соц. сети:</div>
                    <ul class="signin-social__list flex justify-center">
                        <li><a href="" class="google"><svg class="icon icon-google">
                                    <use xlink:href="/img/icons.svg#google" />
                                </svg></a></li>
                        <li><a href="" class="facebook"><svg class="icon icon-facebook">
                                    <use xlink:href="/img/icons.svg#facebook" />
                                </svg></a></li>
                        <li><a href="" class="vk"><svg class="icon icon-vk">
                                    <use xlink:href="/img/icons.svg#vk" />
                                </svg></a></li>
                    </ul>
                </div>
                <div class="form-group form-link">
                    <a href="#modal-registration" data-modal>Регистрация</a>
                </div>
                <div class="restore-password flex justify-center">
                    <a href="#modal-restore-password" class="restore-password__link" data-modal>Восстановить пароль</a>
                </div>
            </form>
        </div>
    </div>

Code (markup):

Zero scripting-off graceful degradation, static SVG loading SVG in the markup (a double hurr-durrz), no images off graceful degradation and/or tooltips (false simplicty), PLACEHOLDER IS NOT A LABEL, endless pointless DIV for nothing, DIV doing H2's job, endless pointless classes instead of leveraging semantics, onevent in the markup instead of quality scripting hooking same...

that's' a lot of pointless junk doing the job of:

	 <form action="" class="modal" id="signIn" method="post">
			<div>
				<a href="#" class="modalClose"></a>
				<h2>Вход</h2>
				<fieldset>
					<label>
						Еmail или телефон<br>
						<input type="text" name="login" required><br>
					</label><label>
						Пароль<br>
						<input type="password" name="password" required><br>
					</label>
				</fieldset>
				<footer>
					<button>Войти</button>
					<!-- hideen inputs go here -->
					<h3>Войти через соц. сети:</h3>
					<ul class="socialLogins">
						<li class="google"><a href="#" ><span>Google</span></a></li>
						<li class="facebook"><a href="#"><span>FaceBook</span></a></li>
						<li class="vk"><a href="#"<span>VK</span></a></.i>
					</ul>
					<a href="#registrater">Регистрация</a><br>
					<a href="#restorePass">Восстановить пароль</a>
				</footer>
			</div>
		<!-- signIn.modal --></form>

Code (markup):

See my article here on how that would work:
https://levelup.gitconnected.com/modal-dialog-driven-websites-without-javascript-16e858615780

You've got all sorts of garbage code like that. Even your header is semantic gibberish and a prime example of why idiocy like jquery-ui or other "frameworks" saddle people up and take them for a ride.

Like the header where it's 2.5k doing 661 byte's job -- more than triple what's needed! You've got this wreck of "eye cans haz teh intarwebs":

<div class="wrapper">

    <div class="wrapper__content">

        <div>

    <div class="header-wrapper">
        <header class="header ">
            <div class="container">
                <div class="header__wrapper">
                    <a href="/" class="header__logo">
                        <svg width="45" height="29">
                            <use xlink:href="/img/sprite.svg#logo"></use>
                        </svg>
                    </a>
                    <nav class="header__nav">
                        <div class="header__nav-menu">
                            <a href="/photos" class="header__nav-link">Фотографии</a>
                            <a href="/nominations" class="header__nav-link">Номинации</a>
                            <a href="/Party" class="header__nav-link color">Party</a>
                            <a href="/photographers" class="header__nav-link">Фотографы</a>
                        </div>
                    </nav>
                    <div class="header__content">

                        <a href="#modal-signin" class="header__signIn" data-modal><span>Войти</span></a>
                        <a href="#" class="header__notifications active">
                            <svg width="17" height="17">
                                <use xlink:href="/img/sprite.svg#notifications"></use>
                            </svg>
                            <span class="mark"></span>
                        </a>
                        <a href="#" class="header__user">
                            <svg width="22" height="22" class="header__user-icon">
                                <use xlink:href="/img/sprite.svg#user"></use>
                            </svg>
                            <img src="/img/user.jpg" class="header__user-img" alt="">
                        </a>
                        <a  onclick="modalSigninOpen(); return false;" class="header__search">
                            <svg width="15" height="15">
                                <use xlink:href="/img/sprite.svg#search"></use>
                            </svg>
                        </a>
                        <button class="header__btn-menu">
                            <span></span>
                            <span></span>
                            <span></span>
                        </button>
                    </div>
                </div>
            </div>
        </header>
    </div> <!-- header-wrapper -->

Code (markup):

More garbage DIV, more garbage pointless classes, button+span doing generated content's job, anchors that aren't relevant to a non-logged in user slopped into the markup, more SVG in the markup that should probably be in the CSS, etc, etc, etc.

	<div class="fauxBody">

		<header id="top">
			<div>
				<h1><a href="/">Site Title</a></h1>
				<button type="button" class="openMainMenu" hidden></button>
				<nav id="mainMenu">
					<ul>
						<li><a href="/photos">Фотографии</a></li>
						<li><a href="/nominations">Номинации</a></li>
						<li><strong><a href="/Party">Party</a></strong></li>
						<li><a href="/photographers">Фотографы</a></li>
					</ul>
				</nav>
				<ul ud="userMenu">
					<li><a href="#signIn" class="action">Войти</a></li>
					<li><a href="#search" class="search"><span>Search</span></a></li>
				</ul>
			</div>
		</header>

Code (markup):

Being about all a section like that warrants for markup, INCLUDING triggering the modal dialogs and going hamburger with the menu.

See my newer hamburger article that's focus driven:

https://medium.com/codex/building-a-more-accessible-and-simpler-hamburger-menu-f6d681a7e671

That only uses JavaScript to implement the escape key to close modals, and polyfilling the fact that iOS is a steaming dung-heap.

It's hardly a shock you're having trouble adding new modals or subsections given the ridiculously overthought and poorly developed code. But that's to be expected from the ****-show of ignorance, incompetence, and ineptitude that are jQuery, jQuery-UI, and all the other broken nonsense you've got in there.

My advice, pitch it and start over, there is little of value to salvage from that, particularly given how big a middle finger it's flipping at accessibility norms.