Featherlight隐藏div上的Close [英] Featherlight hide div on Close

问题描述

我正在尝试创建一个提交了数据的预览屏幕，并将其显示在Featherlight灯箱中.

I'm trying to create a preview screen with data submitted, and display it in 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个字段，一个提交按钮和一个预览按钮:

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>

当我使用.toggle时，我可以用DIV显示到羽毛灯框，但是当我关闭羽毛灯框时，我无法理解如何隐藏<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.

有人可以指导我关闭羽毛灯框时如何隐藏DIV，并让我知道这是否是正确的方法吗?

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?

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

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.

问题1 :我需要在羽毛灯关闭时切换隐藏".

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

问题2 :当羽毛灯灯箱现在关闭时，当我再次单击预览按钮时，DIV仅调用为空，但不调用.append来放置值.

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.

推荐答案

您需要将内容正确传递给Featherlight，也不需要切换元素，因为Featherlight将在close事件上执行此操作.

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

正在工作的JSFiddle: https://jsfiddle.net/rdawkins/9vktzw88/

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

这篇关于Featherlight隐藏div上的Close的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！