防止（非引导）模态弹出窗口在按钮提交后立即关闭，并显示消息

Question

我创建了一个模式弹出窗口，用于登录（并检索密码）从其他帖子中获取一些提示。它工作正常，但是当我提交登录按钮时它会立即关闭模态，即使显示了一条消息。通过再次打开弹出窗口可以看到消息显示：

当有任何消息时，意图显然不是立即关闭弹出窗口，否则客户端没有机会看到它。

我在这个网站和其他网站上搜索过这个问题，但只看到了似乎暗示自举模式的解决方案以及其他不适合我的情况的解决方案。任何帮助都非常感谢。

我的代码如下：

//JAVASCRIPT
// Get the modal
                var modal2 = document.getElementById('myModal2');

                // Get the button that opens the modal
                var btn2 = document.getElementById("myBtn_login_popup");

                // Get the <span> element that closes the modal
                var span2 = document.getElementsByClassName("close2")[0];
                
                var pasw = document.getElementById("retrieve_pasw");
                var pasw_form = document.getElementById("modal-body_b");
                
                // When the user clicks on the button, open the modal 
                if (btn2) {
                    btn2.onclick = function() {
                        modal2.style.display = "block";
                    }
                }

                // When the user clicks on <span> (x), close the modal
                span2.onclick = function(event) {
                    modal2.style.display = "none";
                }

                pasw.onclick = function(event) {
                    pasw_form.style.display = "block";
                }

<!-- HTML
<!-- The Modal -->
            <div id="myModal2" class="modal">
                <!-- Modal content -->
                <div class="modal-content2">
                    <div class="modal-header_a">
                        <?php echo '<h2>' . $header_content . '</h2>';?>
                        <span class="close2"></span>
                    </div>
                    <?php wc_print_notices(); ?>
                    <div class="modal-body_a">
                        
                        <form action="" class="woocommerce-form woocommerce-form-login login" method="post">
                            
                            <?php echo __('Please insert your username/email and your password to login:', 'woocommerce_php'); ?>
                            
                            <?php do_action( 'woocommerce_login_form_start' ); ?>

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

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

			                <p class="form-row">
				                <?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?>
				                <input type="submit" class="woocommerce-Button button" name="login" value="<?php esc_attr_e( 'Login', 'woocommerce' ); ?>" />
				                <label class="woocommerce-form__label woocommerce-form__label-for-checkbox inline">
					                <input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" id="rememberme" value="forever" />
					                <span><?php _e( 'Remember me', 'woocommerce' ); ?></span>
				                </label>
			                </p>

			                <p class="woocommerce-LostPassword lost_password">
				                <button type="button" id="retrieve_pasw" class="retrieve_pasw" href=""><?php _e( 'Forgot password?', 'woocommerce' ); ?></button>
			                </p>

			                <?php do_action( 'woocommerce_login_form_end' ); ?>
                        </form> 
		    </div>
                </div>
            </div>

Answer 1

Well I got it !! After looking a lot around and thinking about it.

First we must include a variable to check whether there are (error) messages in the buffer to be displayed. If so, then just let them print to screen and force the reopening of the modal.

So in the first step, it will suffice to replace the line where I had

<?php wc_print_notices(); ?>

with the following php:

<?php 
  ob_start();
  wc_print_notices();
  $messages = ob_get_contents();
?>

The second step implies some javascript to make sure that when the variable $messages is not empty, we force the modal to stay open.

var messages_bool = "<?php echo !empty($messages); ?>";
if (messages_bool) {
  modal2.style.display = "block";
}

Finally, we must make sure that if the user closes the modal and then reopens it, that the message is no longer there ...

var elements = document.getElementsByClassName("woocommerce-error");
for(var i = 0, length = elements.length; i < length; i++) {
  elements[i].style.display = 'none';
}

This is working fine in my website.