Featherlight隐藏div关闭

Question

I'm trying to create a preview screen with data submitted, and display it in Featherlight Lightbox.

I have the following sample codes.

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;

}); 

And then I have the following html codes to create 2 fields, a submit button and a preview button:

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

I'm able to show to featherlight box with my DIV when i use .toggle, however I cannot make sense of how I can hide the <div> when i close the featherlight light box.

Can anyone guide me on how to hide the DIV when the featherlight box is close, and let me know whether this is the right way to do?

My Objective... to collect input from the form fields, send via ajax to php to process it, and on success, display in a preview light box where i can have a close button and a submit button. The close button can close it, but the submit button will have the same function as the form submit button.

Problem 1: I need to toggle Hide when the feather light closes.

Problem 2: When the featherlight lightbox closes now, and i click on the preview button again, the DIV only calls empty but it doesn't call the .append to put in the value.

Answer 1

You needed to pass the content properly to featherlight and also did not need to toggle the element since featherlight will do that on the close event.

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', {});
   }
});

Working JSFiddle: https://jsfiddle.net/rdawkins/9vktzw88/