Edit modal=Native UI issues & fix
-
I’ve been testing out this plug-in (version 1.7.9) and for the most part it works perfectly. I noticed a slight UI issue that I’ve since patched.
The bug;
In your Edit Field Group set Edit modal to Native
When editing your gallery images click on the pencil icon to edit an image
>> This opens the native modal as expected
Closing the modal by way of the close icon (top right) or the ‘Insert into page’ button fails to close the ‘acf-gallery-backdrop’ overlay or unsets the scroll overflow on the page body.The solution:
Edit the acf-photo-gallery-field.js file and adjust the code from line 119 onwards to add the close and submit buttons to the existing code.My updated code is;
$(document).on('click', '#acf-photo-gallery-metabox-edit .acf-edit-photo-gallery button.button-close, div.media-modal button.media-modal-close', function() { var id; id = $(this).attr('data-close'); $('#acf-photo-gallery-metabox-edit #acf-photo-gallery-metabox-edit-' + id).fadeOut('fast'); $('.acf-gallery-backdrop').remove(); $('body').css('overflow', 'auto'); return false; }); $(document).on('click', '#acf-photo-gallery-metabox-edit .acf-edit-photo-gallery button.button-primary, div.media-modal-content button.button-primary', function() { var button, field, data, post, attachment, action, nonce, fieldname, form = {}; button = $(this); url = $(this).attr('data-ajaxurl'); action = 'acf_photo_gallery_edit_save'; attachment = $(this).attr('data-id'); fieldname = button.attr('data-fieldname'); $('div.acf-photo-gallery-group-' + fieldname + ' #acf-photo-gallery-metabox-edit-' + attachment + ' .acf-photo-gallery-edit-field').each(function(i, obj) { if (obj.name == 'acf-pg-hidden-action') { form['action'] = obj.value; } else if (obj.type == 'checkbox') { if ($(this).prop("checked")) { form[obj.name] = obj.value; } else { form[obj.name] = null; } } else { form[obj.name] = obj.value; } }); button.attr('disabled', true).html('Saving...'); $.post(url, form, function(data) { button.attr('disabled', false).html('Save Changes'); $('#acf-photo-gallery-metabox-edit #acf-photo-gallery-metabox-edit-' + attachment).fadeOut('fast'); $('.acf-gallery-backdrop').remove(); $('body').css('overflow', 'auto'); }); return false; });
- The topic ‘Edit modal=Native UI issues & fix’ is closed to new replies.