Beta 5.1 - Suspected Modal Bug ... ? or user error

Beta
#1

Hi,

Multiple modals, all load content of the first even with different modal ID.

I’ve deactivated all plugins running on the staging website, but still no better.

Issue:
I’ve made a new simple web page with two modals to test the problem. (Same happens with more than 2).

Both modals were brought in as new elements, then I loaded a preset for design and made sure both have a unique ID in customisation. I replaced the image and content on the 2nd one.

If I open the 2nd modal as soon as the page loads it loads the correct content.
BUT…
If I open the 2nd modal box after 2-3 seconds it shows the content of the first modal box.

You can see it here:

Summary

https://stormystudio.staging.wpengine.com/testing-modals/

#2

In your example the modals both have the same ID if you look in the code. Maybe the modal id’s are not updating. i.e. 1-modal

I have a site in development that I upgrade to Pro 5.1 Beta 1 which has several modals on the page and they are working fine.

#4

Perhaps it is not saving? I haven’t made new modals or replicated mine from presets but the ones I have are working. Yours still show the same ID.

modals
modals1131×662 89.9 KB

#7

Hi,

Thanks, sorry, they were different, but just for speed when testing I only changed one number in the vimeo url (changed the 8 to a 4) so it referenced another video. Sorry, as I appreciate that’s not the best approach when then asking for help here.

I’ve pasted in an entirely different embed code now… but… the problem is still the same.

#10

Maybe a bug :frowning: I see the problem happening now. Mine are fine although I haven’t worked on them or added new ones. Plus I guess I am not embedding videos. It looks like somehow the video embed is getting replaced.

I am going to delete my posts so it is easier for Alex to see your stuff.

#11

Cool, thanks for your time looking at it. It is appreciated! Good luck with the 5.1 site you’re working on.

#12

Hi @draper3000,

I’ve checked your page and I think this could be an issue with the embed codes. There are four modals, all with unique toggleable ID attributes. Bear with me here, but if I do a view source (not dev tools) on the page, and search for the iframes, they each have slightly different mark.

Search for height:100%;" title=" and you should get four results. The URLs are all the same, but they each have different title attributes. This suggests to me that in fact, all the modals are unique and working correctly, but the embed codes are somehow mixed up and all pointing to the same video.

To test this, try adding a Text element in each modal as well with some unique text.

@urchindesign thanks for jumping in here and contributing as well!

#13

Thanks @alexander.

You’re correct that the right modal is loading each time, I added a text box to each one, and it does indeed change modal. So it’s the Vimeo embed code that’s getting mixed up.

I’ve been through and triple checked and each has a unique Vimeo Embed code.

I just recorded a quick video, to show the two places I can grab embed codes from on Vimeo.

I’ve been through an ensured each modal is using the shorter of the embed codes.

The same error still exists… after 2-3 seconds all modals load the first Vimeo video.

Quick video showing the issue.

#14

Thanks! I checked your page again and do see the issue. Would you mind adding login credentials to a secure note? If possible I would like to login and see that more closely. It would also help me duplicate your page in a test environment.

#15

Ok, I’ll add the secure note details below.

#16

Thanks! Think I found it. You have this custom javascript added in your header:

(function($){
    $('.x-modal, .x-modal-close').unbind().click(function(){   
          $('.x-modal-content iframe').attr('src', $('.x-modal-content iframe').attr('src'));
    });
})(jQuery);

You’ll just want to either remove that, or rewrite it differently. Looks like on any modal click, it finds all iframes, then resets the src to the first one found. This isn’t ideal because it affects all the modals on the page with every click.

This is only partially implemented, and is subject to change, so I can’t promise it won’t break after an update, but there is a way to reset Video elements inside modals. Add data-rvt-offscreen-reset as a custom attribute on the Video element. Anything with data-rvt-* is experimental for now since it isn’t fully implemented. When the feature is complete, this will all be in docs somewhere.

#17

Thanks Alexander,

I really appreciate you finding the cause. Plus, sorry if its not a Beta issue but my site.

After 60 mins of searching, I can’t find that old custom javascript anywhere… not in Pro JS Customisations, not via the header/footer plugin. Not added to the child themes, functions.php.

I guess I’ll continue the search tomorrow to try and find where it’s pulling that code from for the header.

#18

@draper3000, No problem! If I recall correctly, it was in the JS code editor in the sitewide Header.

#19

Ah… ok,. I’ll take a look there. Thanks… There’s too many places to leave old code hanging around :slight_smile:

EDIT: Brilliant… thankyou!!! :raised_hands: :raised_hands: :raised_hands:

#20

You’re most welcome!

#21

Modal won’t display iFrame
For anyone, searching: “data-rvt-offscreen-reset” fixes the display problem for all iFrames nested in modals.
Don’t know why, though …