上课时关闭模态，与另一个保持打开状态

Posted 2023-05-08

【中文标题】上课时关闭模态，与另一个保持打开状态

【英文标题】：Close modal when class is present, stay open with another

【发布时间】：2021-10-17 11:38:07

【问题描述】：

我有一个来自 W3schools 的模式，其中包含来自插件（WooCommerce 的产品页面运费计算器）的简码，该插件是来自 Woocommerce 的运费计算器表格。

在提交时，它会检查可用的运输方式，如果有可用的运输方式，则在类中打印一条消息，说明可以运输，反之亦然。

负责这个的php：

    function getMessage()
        $popup_function = get_option('pi_ppscw_address_form_working', 'save-location');
        if($popup_function == 'save-location')
            $msg = __('Your details are saved','pisol-product-page-shipping-calculator-woocommerce');
        elseif($popup_function == 'show-shipping-available')
            $package = pisol_ppscw_product_page_calculator::get_shipping_packages();
            $zone = WC_Shipping_Zones::get_zone_matching_package( $package[0] );
            $shipping_methods = $zone->get_shipping_methods(true);
            if(empty($shipping_methods))
                $msg = __('We do not provide shipping to this location', 'pisol-product-page-shipping-calculator-woocommerce');
                wp_send_json_error($this->errorTemplate($msg));
                return;
            else
$msg = __('We provide shipping to this location', 'pisol-product-page-shipping-calculator-woocommerce');

            
        

        wp_send_json_success($this->successTemplate($msg));
    
    

    function errorTemplate($msg)
        $msg = strip_tags($msg);
        return '<div class="pi-address-form-error">'.$msg.'</div>';
    

    function successTemplate($msg)
$msg = strip_tags($msg);
        return '<div class="pi-address-form-success">'.$msg.'</div>';
    

当pi-address-form-success 添加到表单时，我正在尝试关闭模式：

<form class="pi-ppscw-address-form pi-vertical" action="https://denachtslijterij.nl/wp-admin/admin-ajax.php" method="post" _lpchecked="1">
        
        <div class="pi-address-form-fields">
                    <p class="form-row form-row-wide" id="calc_shipping_country_field">
                <select name="calc_shipping_country" id="calc_shipping_country" class="country_to_state country_select" rel="calc_shipping_state">
                    <option value="default">Select a country / region…</option>
                    <option value="NL" selected="selected">Nederland</option>               </select>
            </p>
        
                    <p class="form-row form-row-wide" id="calc_shipping_state_field">
                                    <input type="hidden" name="calc_shipping_state" id="calc_shipping_state" placeholder="State / County">
                                </p>
        
                    <p class="form-row form-row-wide" id="calc_shipping_city_field">
                <input type="text" class="input-text" value="" placeholder="City" name="calc_shipping_city" id="calc_shipping_city">
            </p>
        
                    <p class="form-row form-row-wide" id="calc_shipping_postcode_field">
                <input type="text" class="input-text" value="" placeholder="Postcode, bv. 1234AB " name="calc_shipping_postcode" id="calc_shipping_postcode">
            </p>
        
        </div>
<div class="pi-ppscw-address-form-error"><div class="pi-address-form-success">We provide shipping to this location</div></div>
        <p class="pi-address-form-submit"><button type="submit" name="calc_shipping" value="1" class="button pisol-update-address-button">Check postcode</button></p>
        <input type="hidden" id="pisol-ppscw-address-form-nonce" name="pisol-ppscw-address-form-nonce" value="02cba97ea8"><input type="hidden" name="_wp_http_referer" value="/test/">  
    <input type="hidden" name="action" value="pisol_save_address_form">
</form>

模态 html：

<button id="location_btn">Open Modal</button>
<div id="location_modal" class="modal">
<div class="location_modal-content">
<div class="modal-header-2">
<span class="modal-title-2">Locatie</span>
<span class="close-2">×</span>
</div>
[pi_address_form]
</div>
</div>

我正在尝试在 else 之后添加关闭模式的代码，但我不知道这是否可能。因为响应是用 AJAX 添加的。

到目前为止我已经尝试过：

<?
<style type="text/css">#location_modal
display:none;
</style>
<?php

<?
<script type="text/javascript">#location_modal
jQuery('#location_modal').modal('show');
</script>
<?php

以及其他变体。但没有任何效果。单击模态后，该模式保持打开状态，并且不会显示消息。

【参考方案1】：

我向插件创建者寻求支持，我一开始就应该这样做。因此，对于希望使用运输计算器表单插件关闭模式的任何人：

        function pisol_custom_20210815() 
    
        $js = '
        jQuery(document).ready(function($)
        $(document).ajaxComplete(function (event, jqxhr, settings) 
            if (settings.data && settings.data.includes("action=pisol_save_address_form")) 
               if(jqxhr.responseJSON)
                    if(jqxhr.responseJSON.success)
                        setTimeout(function () 
                        jQuery("#location_modal").fadeOut();
                         , 5000);
jQuery.magnificPopup.close()
                    
               
            
        );
        );';
        wp_add_inline_script('jquery', $js, 'after');
    
    add_action( 'wp_print_scripts', 'pisol_custom_20210815', 100 );
      

子主题函数 PHP 文件中的代码