Login/Register Modal in ModelTheme themes

custom.js

         /*LOGIN MODAL */
        var ModalEffects = (function() {
                function init_modal() {

                    var overlay = document.querySelector( '.modeltheme-overlay' );
                    var overlay_inner = document.querySelector( '.modeltheme-overlay-inner' );
                    var modal_holder = document.querySelector( '.modeltheme-modal-holder' );
                    var html = document.querySelector( 'html' );

                    [].slice.call( document.querySelectorAll( '.modeltheme-trigger' ) ).forEach( function( el, i ) {

                        var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
                            close = modal.querySelector( '.modeltheme-close' );

                        function removeModal( hasPerspective ) {
                            classie.remove( modal, 'modeltheme-show' );
                            classie.remove( modal_holder, 'modeltheme-show' );
                            classie.remove( html, 'modal-open' );

                            if( hasPerspective ) {
                                classie.remove( document.documentElement, 'modeltheme-perspective' );
                            }
                        }

                        function removeModalHandler() {
                            removeModal( classie.has( el, 'modeltheme-setperspective' ) ); 
                        }

                        el.addEventListener( 'click', function( ev ) {
                            classie.add( modal, 'modeltheme-show' );
                            classie.add( modal_holder, 'modeltheme-show' );
                            classie.add( html, 'modal-open' );
                            overlay.removeEventListener( 'click', removeModalHandler );
                            overlay.addEventListener( 'click', removeModalHandler );

                            overlay_inner.removeEventListener( 'click', removeModalHandler );
                            overlay_inner.addEventListener( 'click', removeModalHandler );

                            if( classie.has( el, 'modeltheme-setperspective' ) ) {
                                setTimeout( function() {
                                    classie.add( document.documentElement, 'modeltheme-perspective' );
                                }, 25 );
                            }
                        });

                    } );

                }

            if (!jQuery("body").hasClass("login-register-page")) {
                init_modal();
            }

        })();
        

functions.php

<?php 

if (!function_exists('numismatico_account_login_lightbox')) {
    function numismatico_account_login_lightbox(){
        if ( class_exists( 'WooCommerce' ) ) {
            if (!is_user_logged_in() && !is_account_page()) {
                ?>
                <div class="modeltheme-modal-holder">
                    <div class="modeltheme-overlay-inner"></div>
                    <div class="modeltheme-modal-container">
                        <div class="modeltheme-modal" id="modal-log-in">
                            <div class="modeltheme-content" id="login-modal-content">
                                <h3 class="relative text-center">
                                    <?php echo esc_html__('Access Your Account', 'numismatico'); ?>
                                </h3>
                                <div class="modal-content row">
                                    <div class="col-md-12">
                                        <?php wc_get_template_part('myaccount/form-login'); ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
              <?php
            }
        }
    }
    add_action('numismatico_after_body_open_tag', 'numismatico_account_login_lightbox');
}

header.php

    <?php 
        /**
        * Login/Register popup hooked
        */
        do_action('numismatico_after_body_open_tag');
    ?>

style.css

/*-----------------------------*/
/*POPUP LOGIN*/
.modeltheme-modal-holder.modeltheme-show, .modeltheme-show ~ .modeltheme-overlay {
    opacity: 1;
    visibility: visible;
    overflow: hidden auto;
}
.modeltheme-modal-holder {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    visibility: hidden;
    opacity: 0;
    outline: none !important;
    -webkit-backface-visibility: hidden;
}
.modeltheme-show {
    visibility: visible;
}

.modeltheme-content .modeltheme-close {
    cursor: pointer;
    padding: 25px;
    right: 0;
    opacity: 0.8;
    top: 0;
}
.modeltheme-content .modeltheme-close:hover {
    opacity: 1;
}
.modal-header .close {
    color: #fff;
    opacity: 1;
    font-size: 30px;
}
.modeltheme-overlay-inner {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
}
.modeltheme-modal-container {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: table;
    padding: 30px;
    box-sizing: border-box;
}
.modeltheme-show {
    visibility: visible;
}
.modeltheme-modal {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}
.modeltheme-content#login-modal-content, .modeltheme-content#signup-modal-content {
    border-radius: 15px;
}
.modeltheme-modal.modeltheme-show * {
    opacity: 1;
    visibility: visible;
}
.modeltheme-modal .modal-content{
    border-radius: 0;
}
.modeltheme-modal .modeltheme-content {
    max-width: 900px;
    margin: 0 auto;
    z-index: 12;
    position: relative;
}
.modeltheme-modal * {
    opacity: 0;
    visibility: hidden;
}
.modeltheme-content {
    color: #3F3F3F;
    background: #FFFFFF;
    position: relative;
    margin: 0 auto;
}
.modeltheme-content#login-modal-content h3, .modeltheme-content#signup-modal-content h3 {
    background: #222;
    border-radius: 5px 5px 0px 0px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 25px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
}
.modeltheme-modal .modeltheme-content > div {
    padding: 10px 15px 20px!important;
}
#login-modal-content h2 {
    font-size: 25px;
    font-weight: bold;
    color: #000;
}

woocommerce myaccount form-login.php

<?php
/**
 * Login Form
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/myaccount/form-login.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce\Templates
 * @version 4.1.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

if (!is_product()) {
	do_action( 'woocommerce_before_customer_login_form' );
}
?>

<?php if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?>

<div class="u-columns col2-set angro-set-login row" id="customer_login">

	<div class="u-column1 col-1  col-md-6">

<?php endif; ?>

		<h2><?php esc_html_e( 'Login', 'angro' ); ?></h2>

		<form id="login" class="woocommerce-form woocommerce-form-login login" method="post">

			<?php do_action( 'woocommerce_login_form_start' ); ?>
			<p class="status"></p>

			<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
				<label for="username"><?php esc_html_e( 'Username or email address', 'angro' ); ?>&nbsp;<span class="required">*</span></label>
				<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
			</p>
			<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
				<label for="password"><?php esc_html_e( 'Password', 'angro' ); ?>&nbsp;<span class="required">*</span></label>
				<input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" id="password" autocomplete="current-password" />
			</p>

			<?php do_action( 'woocommerce_login_form' ); ?>

			<p class="form-row">
				<label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme">
					<input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" id="rememberme" value="forever" /> <span><?php esc_html_e( 'Remember me', 'angro' ); ?></span>
				</label>
				<?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?>
				<button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="login" value="<?php esc_attr_e( 'Log in', 'angro' ); ?>"><?php esc_html_e( 'Log in', 'angro' ); ?></button>
			</p>
			<p class="woocommerce-LostPassword lost_password">
				<a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php esc_html_e( 'Lost your password?', 'angro' ); ?></a>
			</p>

			<?php do_action( 'woocommerce_login_form_end' ); ?>
			<?php wp_nonce_field( 'ajax-register-nonce', 'security' ); ?>
		</form>

<?php if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?>

	</div>

	<div class="u-column2 col-2 col-md-6">

		<h2><?php esc_html_e( 'Register', 'angro' ); ?></h2>

		<form id="register" method="post" class="woocommerce-form woocommerce-form-register register" <?php do_action( 'woocommerce_register_form_tag' ); ?> >

			<?php do_action( 'woocommerce_register_form_start' ); ?>
			<p class="status"></p>

			<?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?>

				<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
					<label for="reg_username"><?php esc_html_e( 'Username', 'angro' ); ?>&nbsp;<span class="required">*</span></label>
					<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="reg_username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
				</p>

			<?php endif; ?>

			<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
				<label for="reg_email"><?php esc_html_e( 'Email address', 'angro' ); ?>&nbsp;<span class="required">*</span></label>
				<input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" id="reg_email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
			</p>

			<?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?>

				<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
					<label for="reg_password"><?php esc_html_e( 'Password', 'angro' ); ?>&nbsp;<span class="required">*</span></label>
					<input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="reg_password" autocomplete="new-password" />
				</p>

			<?php else : ?>

				<p><?php esc_html_e( 'A password will be sent to your email address.', 'angro' ); ?></p>

			<?php endif; ?>

			<?php do_action( 'woocommerce_register_form' ); ?>

			<p class="woocommerce-form-row form-row">
				<?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?>
				<button type="submit" class="woocommerce-Button woocommerce-button button woocommerce-form-register__submit" name="register" value="<?php esc_attr_e( 'Register', 'angro' ); ?>"><?php esc_html_e( 'Register', 'angro' ); ?></button>
			</p>

			<?php do_action( 'woocommerce_register_form_end' ); ?>

		</form>

	</div>

</div>
<?php endif; ?>

<?php do_action( 'woocommerce_after_customer_login_form' ); ?>