Featherlight 在关闭时隐藏 div

Question

我正在尝试创建一个包含提交数据的预览屏幕，并将其显示在 Featherlight Lightbox 中。

我有以下示例代码。

jQuery(document).ready(function() {

//Triggle when Preview Button is Clicked.
jQuery('.OpenLightBox').off('click').on('click', function( e ) {

    var pa_firstname=   jQuery('input[name="pa-[name_first]"]').val();
    var pa_lastname=    jQuery('input[name="pa-[name_last]"]').val();
    if (pa_firstname == null || pa_firstname == '') {
        alert('Cannot be empty');
        return false;
    } else {

    jQuery('.LightBox').empty();
    jQuery('.LightBox').append('First Name in Ajax is' + pa_firstname + ' And Last Name in Ajax is ' + pa_lastname);

            //alert('done');

    }

    jQuery.ajax({
        url : padvisor_ajax.ajax_url,

        type : 'POST',
        dataType: 'json',
        data : {
            action: 'padvisor_test_ajaxcall_lightbox',
            pa_first_name: pa_firstname,
            pa_last_name: pa_lastname
        },
        success: function (data) {
            jQuery.featherlight(jQuery('.LightBox'), {});
            jQuery('.LightBox').toggle();

        }

    });

    return false;

}); 

然后我有以下 html 代码来创建 2 个字段，一个提交按钮和一个预览按钮：

<form id="pd_test">
<span id="pa-[name_first]" class="pa_name_first"><label for="pa_name_first" >First Name</label>
<input type="text" name="pa-[name_first]" id="pa-[name_first]" value=""/>
</span>';
<span id="pa-[name_last]" class="pa_name_last"><label for="pa_name_last" >Last Name</label><input type="text" name="pa-[name_last]" id="pa-[name_last]" value=""/></span>
<button type="submit" value="Submit">Send Now</button>

<button value="preview" class="OpenLightBox">Preview</button></form>
<div class="LightBox" style="width: 300px; height: 60px; display:none;">This is the content, let the content dwell here</div>

当我使用 .toggle 时，我可以使用我的 DIV 向羽毛灯箱显示，但是当我关闭羽毛灯箱时，我无法理解如何隐藏 <div>。

谁能指导我在羽毛灯箱关闭时如何隐藏 DIV，并让我知道这是否是正确的做法？

我的目标...从表单字段收集输入，通过 ajax 发送到 php 进行处理，并在成功时显示在预览灯箱中，我可以在其中有一个关闭按钮和一个提交按钮。关闭按钮可以关闭它，但是提交按钮将具有与表单提交按钮相同的功能。

问题 1：我需要在羽毛灯关闭时切换隐藏。

问题2：当featherlight灯箱现在关闭时，我再次点击预览按钮，DIV只调用empty但它不调用.append来输入值。

Answer 1

您需要将内容正确地传递给featherlight，并且也不需要切换元素，因为featherlight 会在关闭事件中执行此操作。

HTML

<span id="pa-name_first" class="pa_name_first"><label for="pa_name_first" >First Name</label>
   <input type="text" name="pa-name_first" id="pa-name_first" value=""/>
</span>
<span id="pa-name_last" class="pa_name_last"><label for="pa_name_last" >Last Name</label><input type="text" name="pa-name_last" id="pa-name_last" value=""/></span>
<button type="submit" value="Submit">Send Now</button>
<button type="button" class="OpenLightBox">Preview</button>
<div class="LightBox" style="width: 300px; height: 60px; display:none;">
  <span id="content"></span>
</div>

jQuery

//Triggle when Preview Button is Clicked.
jQuery('.OpenLightBox').off('click').on('click', function( e ) {

   var pa_firstname=   jQuery('input[name="pa-name_first"]').val();
   var pa_lastname=    jQuery('input[name="pa-name_last"]').val();
   if (pa_firstname == null || pa_firstname == '') {
       alert('Cannot be empty');
       return false;
   } else {
       var content = 'First Name in Ajax is' + pa_firstname + ' And Last Name in Ajax is ' + pa_lastname+'';
       jQuery('#content').html("");
       jQuery('#content').html(content);
       jQuery.featherlight('#content', {});
   }
});

工作 JSFiddle：https://jsfiddle.net/rdawkins/9vktzw88/