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

Question

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

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

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

我的代码如下：

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

好吧，我明白了！看了很多，想了想。

首先我们必须包含一个变量来检查缓冲区中是否有（错误）消息要显示。如果是这样，那么让他们打印到屏幕并强制重新打开模态。

所以在第一步中，替换我

所在的行就足够了

<?php wc_print_notices(); ?>

与以下 php:

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

第二步暗示一些javascript以确保当变量 $messages 不为空时，我们强制模态框保持打开状态。

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

最后，我们必须确保如果用户关闭模式然后重新打开它，消息将不再存在...

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

这在我的网站上运行良好。

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

Prevent (non-bootstrap) Modal Popup from immediately closing after button submit, and display messages

javascript

modal-dialog

submit

button

woocommerce