Я пытаюсь создать экран предварительного просмотра с представленными данными и отобразить его в Лайтбокс в Featherlight.
У меня есть следующие примеры кодов.
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>
Я могу показать коробку с перьями с моим DIV, когда я использую .toggle, однако я не могу понять, как я могу скрыть <div>
когда я закрываю светлый ящик featherlight.
Может ли кто-нибудь направить меня на то, как скрыть DIV, когда ящик с перьями закрыт, и дайте мне знать, правильно ли это сделать?
Моя цель … для сбора ввода из полей формы, отправки через ajax в php для его обработки и успешного выполнения, отображения в окне предварительного просмотра, где у меня есть кнопка закрытия и кнопка отправки. Кнопка закрытия может закрыть ее, но кнопка отправки будет иметь ту же функцию, что и кнопка отправки формы.
Проблема 1 : Мне нужно переключить Скрыть, когда свет пера закрывается.
Проблема 2. Когда светлая панель featherlight закрывается сейчас, и я снова нажимаю кнопку предварительного просмотра, DIV только пуст, но он не вызывает .append для ввода значения.