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; 

}); 

そして、私は2つのフィールド、送信ボタンとプレビューボタン作成するには、次のHTMLコードを持っている：

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

を私が使用したときに、私は私のDIVでfeatherlightボックスに見せることができますよ.toggleしかし、featherlightのライトボックスを閉じると、私は<div>をどのように隠すことができないのか分かりません。

フェザーライトボックスが閉じているときにDIVを非表示にする方法を教えてもらえますか？これが正しい方法かどうか教えてください。

私の目的...フォームフィールドから入力を収集し、それを処理するためにajax経由でPHPに送信し、成功すると、閉じるボタンと送信ボタンを持つプレビューライトボックスに表示します。閉じるボタンは閉じることができますが、送信ボタンはフォーム送信ボタンと同じ機能を持ちます。

問題1：フェザーライトが閉じるときに非表示にする必要があります。

問題2：今度はfeatherlightライトボックスが閉じ、プレビューボタンをもう一度クリックすると、DIVは空を呼び出しますが、.appendを呼び出して値を入れません。

Answer 1

featherlightにコンテンツを正しく渡す必要がありました。また、featherlightがcloseイベントでそれを行うため、要素を切り替える必要はありませんでした。

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/